Question

尝试在悬停一个元素时选择兄弟元素。有没有办法选择dom树上的元素？我正在寻找一个CSS解决方案。

<div id="a">Div A</div>
<div id="b">Div B</div>
<div id="c">Div C</div>
<div id="d">Div D</div>

<style>

#a:hover ~ #b,
#a:hover ~ #c,
#a:hover ~ #d{
    background: #ccc
}

#b:hover ~ #a,
#b:hover ~ #c,
#b:hover ~ #d{
    background: #ccc
}

#c:hover ~ #a,
#c:hover ~ #b,
#c:hover ~ #d{
    background: #ccc
}

#d:hover ~ #a,
#d:hover ~ #b,
#d:hover ~ #c{
    background: #ccc
}

</style>

http://jsfiddle.net/u7tYE/3381/

Answer 1

我使用父容器，我猜它有，你可以得到一些非常接近的CSS。 http://jsfiddle.net/u7tYE/3382/

#all:hover div {
    background:#ccc;
}
#all:hover div:hover {
    background:none;
}

<div id="all">
    <div id="a">Div A</div>
    <div id="b">Div B</div>
    <div id="c">Div C</div>
    <div id="d">Div D</div>
</div>

Answer 2

您需要了解的css选择器。请阅读此http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

选择dom树上的兄弟元素

2 个答案: