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

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

小提琴：

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

谢谢你。

Answer 1

改变

span a:hover

至

span:hover a

它将按预期工作。

Answer 2

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

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

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