Question

当一个元素（在里面）悬停时，是否有办法改变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中使用鼠标但是在链接之外，文本的颜色不会改变......

Answer 1

而不是

#navigation li a:hover {

试

#navigation li:hover a {

Answer 2

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

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

li:hover a {
    color: #d2d2d2;
}

这基本上是说＆＃34;当li悬停时，里面的链接应该改为这些样式。＆＃34;

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

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

li a:hover {
  color: #d2d2d2;
}

只要您没有将li元素设置为比a元素更大的尺寸（通过高度，宽度，边距和/或填充），那么{ {1}}＆＃34;收缩包装＆＃34; li并且与链接的总大小相同。

Answer 3

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

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

Answer 4

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

li a { display: block; }

css在悬停时更改属性

4 个答案: