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

Question

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

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

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

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

您应该考虑 2 事项：

1. <p></p>是块级元素。它不在内联元素中使用，在本例中为<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;
}