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

在CSS中，我希望li元素的bg颜色改变，但是文本的颜色也必须改变。问题是，即使在我将鼠标悬停在li元素上之后，我也必须进一步触摸文本，以使其颜色发生变化

---

如果这能奏效，我会感到惊讶

首先移除

标记

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

---

有两件事你应该考虑：

是块级元素。它不在内联元素中使用，在这种情况下，

只需将

标记设置为块级元素

因此，您的代码应该如下所示：

li:hover {
   background-color: blue;
}

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

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

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

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