2

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

我这辈子都想不通！

感谢您的帮助。

在此处输入图像描述

4

3 回答 3

4

考虑到以下 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 小提琴演示。

当然，这确实需要一个支持通用兄弟~组合子的浏览器，并且再次“当然”这些元素是兄弟。

不幸的是，由于元素之间的边距.box，这确实会导致闪烁（当元素:hover从.box元素移到父.container元素时）

参考：

于 2012-11-05T22:18:48.037 回答
1

由于您没有提及您的标记，因此我使用 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;
}

​演示

先试后买

于 2012-11-05T22:09:46.820 回答
0

这个jsFiddle 示例应该这样做：

$('div').mouseover(function() {
    var x = $(this, 'div').index();
    $('div:lt(' + (x + 1) + ')').addClass('red');
    $('div:gt(' + x + ')').removeClass('red');
});​
于 2012-11-05T22:19:54.353 回答