css - CSS - 悬停时更改 2 个元素的状态

Question

<li class="red">
<p><a href="#">Home</a></p>
</li>

在 CSS 中，我想改变 li 元素的 bg 颜色，但是文本的颜色也必须改变。问题是，即使在我将鼠标悬停在 li 元素之后，我也必须更进一步并实际触摸文本才能改变它的颜色。

如果这可行，我会感到惊讶。

Answer 1

首先删除<p>标签

li.red > a:hover {  
    color: red;  
}

Answer 2

li:hover {
   background-color: blue;
}

li:hover p,
li:hover a {
   color: yellow;
}

Answer 3

您应该考虑两件事：

1. <p></p>是块级元素。它不在 inline-element 内部使用，在这种情况下，<li></li>

2. 只需将您的<a></a>标签设为块级元素即可。

所以你的代码应该是这样的：

<ul>
    <li class="red">
       <a href="#">Home</a>
    </li>
</ul>

然后你可以想出这样的 CSS：

.red a:hover {
   padding: 10px 20px;
   display: block;
   background-color: #9900;
   color: #FFFFFF;
}