悬停时CSS更改属性答案

【问题标题】：css change property on hover悬停时CSS更改属性
【发布时间】：2012-11-02 00:29:27
【问题描述】：

当元素（在内）悬停时，是否有办法更改框的 css 属性？

例如，如果我有：

<table>
<tr><td><a>.....</td></tr>
</table>

我想在链接 a 鼠标悬停时更改容器 td 的属性。有可能吗？

对不起，我没有解释清楚。我有一个，而不是一张桌子......这只是一个例子...... 我有

<ul>
<li><a>.....

在我的 CSS 中我有：

#navigation li a {
text-decoration: none;
color: #333;
text-transform: none;
}
#navigation li:hover {
color: white;
background-color: #333;
}
#navigation li a:hover {
color: white;
background-color: #333;
}

但它不起作用，因为如果我打开链接没关系，但如果我在 li 中使用鼠标但关闭链接，文本的颜色不会改变......

【问题讨论】：

是的。 What have you tried?
看看这里 - stackoverflow.com/questions/5204472/… 这将向您展示如何向表格元素添加悬停动作。在此之后，查看 jQuery css api.jquery.com/css

标签： css hover

【解决方案1】：

但它不起作用，因为如果我打开链接没关系，但如果我在 li 中使用鼠标但关闭链接，文本的颜色不会改变......

那是因为您将鼠标悬停在链接本身上。如果您希望链接在您将鼠标悬停在 li 上时做出反应，只需更改放置悬停伪类的位置即可：

li:hover a {
    color: #d2d2d2;
}

这基本上是说“当 li 悬停时，它里面的链接应该变成这些样式。”

或者，您可以向链接添加填充（例如 - padding: 5px），使其反应字段更大。所以：

li a {
  display: block; /* Required to make it honor padding. */
  padding: 10px;
}

li a:hover {
  color: #d2d2d2;
}

只要您没有将li 元素设置为比a 元素更大的尺寸（通过高度、宽度、边距和/或填充），那么li 将“缩小-包裹”a 并与链接的总大小相同。

【讨论】：

【解决方案2】：

您可以将 display: 块添加到锚元素，这将使锚填充 li... 取决于 ul 等上的缩进等。

li a { display: block; }

【讨论】：

【解决方案3】：

代替

#navigation li a:hover {

试试

#navigation li:hover a {

【讨论】：

【解决方案4】：

您不能更改父元素的属性，但可以在父 td 本身上触发悬停事件：

table td:hover {
    background-color: red;
}

【讨论】：