将鼠标悬停在父级上并突出显示所有孩子

Question

我有以下html：

<span id="spanus">
    <a href="#">child1</a>
    <a href="#">child2</a>
    <a href="#">child3</a>
</span>

和css：

span{
    background: gray;
    border: 2px solid #eaeaea;
    display: inline-block;
    margin: 40px;
}

span:hover{
   background: yellow;
   border: 2px solid #fbfbfb; 
}

a{
   padding: 10px;
    display: inline-block;
}

span a:hover{
    color: #fff;
    background: red;
}

fiddle:

我的问题是，当我悬停跨度时，如何将所有3个孩子悬停在跨度上

谢谢。

Answer 1

变化

span a:hover

到

span:hover a

它将按预期工作。

Answer 2

您需要设置悬停的跨度a，而不是悬停在跨度中：

span:hover a{
    color: #fff;
    background: red;
}

http://jsfiddle.net/NHXPb/1/