跨度悬停在<a> tag</a>内

Question

我在<a>标记内使用了一个范围，我想仅在<span>下的文本上更改悬停颜色，因此它会覆盖默认的悬停CSS。

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

在这个例子中，我只需要在span文本上使用不同的悬停颜色。我如何在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，具体取决于您的实际需求）。