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

有你應該考慮事情：

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; 
}