悬停突出显示多个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元素时）< / p>

参考文献：

• CSS general-sibling ~ combinator。

Answer 2

由于你没有说明你的标记，我使用jQuery从头开始构建了一些东西：

<强>的JavaScript

$('.container > div').hover(
    function() {
        $(this).prevAll().addClass('active');
    },
    function() {
        $('.container > div').removeClass('active');
    }
);​

<强> HTML

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

<强> CSS

div.container > div {
    width: 100px;
    height: 20px;
    background: #ccc;
}

div.container > div:hover, div.container > div.active {
    background: red;
    color:white;
}

<强>样本

Try before buy

Answer 3

jsFiddle example 应该这样做：

$('div').mouseover(function() {
    var x = $(this, 'div').index();
    $('div:lt(' + (x + 1) + ')').addClass('red');
    $('div:gt(' + x + ')').removeClass('red');
});​