Question

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

非常感谢

Answer 1

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

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

JS Fiddle demo

此a处于:hover状态的样式，无论是td还是a本身都悬停在其上。

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规则。

td元素上的伪悬停类不适用于anchor（a）标记

3 个答案: