javascript - 悬停突出显示多个 div 标签

Question

随附的图片显示了我正在寻找的内容。当鼠标悬停在框上时，鼠标上方的所有框都会突出显示。盒子是完全分开的

我一生都无法弄清楚这一点!

感谢您的帮助。

Answer 1

考虑到以下 HTML 标记，纯 CSS 方式是可能的:

<div class="container">
    <div class="box">
    </div>
    <!-- other elements -->
    <div class="box">
    </div>
</div>
​

使用以下 CSS:

div {
    width: 80%;
    margin: 1em auto;
    min-height: 2em;
    border: 1px solid #000;
}

div.box { /* default */
    background-color: #009;
    margin: 0 auto;
}

.container:hover .box {
    background-color: red;
}

.container:hover .box:hover ~ .box {
    background-color: #009;
}

JS Fiddle demo .

当然，这需要一个支持通用同级 ~ 组合器的浏览器，并且“当然”元素是同级元素。

不幸的是，由于 .box 元素之间存在边距，此 does cause flickering (当 :hover 从 .box 元素移至父 .container 元素时)

引用文献:

• CSS general-sibling ~ combinator .