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 フィドルのデモ。

もちろん、これには一般的な兄弟コンビネータをサポートするブラウザが必要であり~、要素が兄弟であることも「もちろん」必要です。

.box残念ながら、要素間にマージンがあると、ちらつきが発生します(要素が親要素に:hover移動するとき) 。.box.container

参考文献:

• CSS 一般兄弟~コンビネータ。

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;
}

デモ

購入する前に試してください

Answer 3

このjsFiddleの例はそれを行う必要があります:

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