html - td 元素上的伪悬停类不适用于锚 (a) 标记

Question

我有一个带有嵌套在 td 标签内的标签的表格。问题是，当我在 td 标签上应用伪悬停类时，a 标签没有相应响应。现在我也可以将伪类应用到 a 标签，但是 a 标签不会跨越 td 单元格的整个区域。悬停时我的背景和文本颜色都会发生变化，现在背景工作正常，但文本仅在悬停在 a 标签上时才会改变颜色，它不会跨越单元格的整个高度。当悬停在 td 标签的任何部分时，我希望 a 标签中的文本颜色发生变化。这是我的工作示例：http: //jsfiddle.net/gGAW5/

非常感谢你

Answer 1

您需要做的就是为您的 CSS 添加第二个选择器a:hover：

#rightDiv a:hover,
#rightDiv td:hover a {
    text-decoration: none;
    color: #2363b0;
}​

JS 小提琴演示。

无论悬停在其上的是 the还是仅其本身，这都会将a其样式化。:hovertda

Answer 2

这是您想要的工作小提琴：

http://jsfiddle.net/gGAW5/9/

#rightDiv td{
font-size: 18px;
color: #ffffff;
padding: 10px 5px; 
border: 1px solid #000099;    
}

#rightDiv a{
color: #ffffff;
display:block;
padding: 22px 5px; 
background: url(http://v4m.mobi/php/landing/images/rightDivBack.jpg) no-repeat;    
}

#rightDiv a:hover{
text-decoration: none;
color: #2363b0;
background-position: -300px 0px;
}   ​

删除#rightDiv td:hover样式。

Answer 3

添加color: #2363b0;到td:hover规则中。