跨度懸停在<a>標記

Question

我在<a>標記內使用跨度，我想僅在<span>的文本上更改懸停顏色，以覆蓋默認的懸停CSS。

<div id="box"> 
    <h4>Title</h4> 
    <p><a href="#"><span>Profile</span></a> | 
     <a href="#">Logout</a></p> 
    </div> 

在這個例子中，我將只需要在跨文本不同的懸停顏色。我如何需要在CSS中定義這個？

我已經試過

#box a:hover span{ 
color: #000;} 

和

#box span:hover{ 
color: #000;} 

都將無法正常工作。

Answer 1

您可以掛接到:hover僞類錨，然後針對<span>元素：

a:hover span { 
    color: red; 
} 

或者，你也可以風格的:hover僞類的跨度，例如：

a span:hover { 
    color: red; 
} 

Answer 2

只需使用span:hover爲您選擇的一部分（或something:hover span取決於你真正想要什麼）。