css - 选择 dom 树上的兄弟元素

标签 css siblings

<分区>

试图在悬停一个元素时选择同级元素。有什么办法也可以选择 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/

最佳答案

我使用的是父容器,我猜它有,你可以用很少的 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>

关于css - 选择 dom 树上的兄弟元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21558942/

上一篇:css - 在移动设备上设计 angular-ui 评级指令

下一篇:CSS vertical-align middle a inline-block

相关文章:

Python/Selenium - 获取元素后面的元素

javascript - jQuery - 针对 sibling 、 parent 、后代和其他家庭动物

html - 如何在 div 悬停时显示相应的标签

html - 在 div/图像右侧 float 文本

javascript - 在滚动条上激活字母动画

css - 是否有 "previous sibling"选择器?

css - 是否有 "previous sibling"选择器?

python - 如何使用 python 更改 html 文档的 css 属性?

chrome 中的 css 问题而不是 IE 中的