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

【问题标题】：Pseudo hover class on td element does not apply to anchor (a) tagtd 元素上的伪悬停类不适用于锚 (a) 标记
【发布时间】：2012-06-29 01:58:18
【问题描述】：

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

非常感谢

【问题讨论】：

标签： html css

【解决方案1】：

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

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

JS Fiddle demo.

这会将a 设置为:hover 状态，无论是td 还是a 本身都悬停在上面。

【讨论】：

+1 这可以简化为 #rightDiv td:hover a 我相信？
这是真的，但我倾向于将它们放在一起（这会导致冗余，但更容易记住编辑时间的规则）。
非常感谢大卫，感激不尽！
检查我的答案。如果您根据用户体验悬停并更改颜色，则意味着它是可点击的，而您的不仅仅是更改属性而不是使您的链接可点击。无论如何，这是你的选择。
对不起，但是什么？ CSS 只能更改属性，仅此而已。如果 OP 想要可点击的链接，那么他所要做的就是填写链接的 href 属性。还是我误解了你的评论？

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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 样式。

【讨论】：

谢谢。这行得通，如果我错了，请纠正我，但我不喜欢应用的填充，不同的浏览器尺寸渲染，它只会产生问题。
不，为什么。在元素上使用填充或边距不会有问题。只是您必须通过适当的计算有效地使用它。我不能说 IE6 或 IE7，但我相信它可以在所有其他浏览器上运行。它在我的 MAC 上与 Chrome 19、FF 13 和 safari 5 一起工作正常。这是你的选择。但是，没有填充和边距的网站是不可能的。