-1

当元素（在内部）悬停时，是否有办法更改框的 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 中使用鼠标但关闭链接文本的颜色不会改变......

4

4 回答 4

4

代替

#navigation li a:hover {

尝试

#navigation li:hover a {
于 2012-11-13T15:41:44.630 回答
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并且与总尺寸相同的链接。

于 2012-11-13T15:27:11.187 回答
0

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

table td:hover {
    background-color: red;
}
于 2012-11-13T15:07:55.303 回答
0

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

li a { display: block; }
于 2012-11-13T15:50:17.540 回答