2

を見てみましょう：

http://jsfiddle.net/PPsHd/

予想どおり、中央の div にカーソルを合わせると、すべての div のホバー イベントがトリガーされます。ホバリング マウスの下の最初の div のみの背景を変更する方法はありますか? つまり、中央の div にカーソルを合わせると、中央の div の色のみが変更されますか?

編集:これは、ユーザーが追加した任意の数のネストされた div に対して可能にする必要があり、javascript で実行できますが、CSS ソリューションを好むでしょう。

私はすでに使用しています：

(function(){
    var highlightedDiv;
    $(document.body).on('mouseover','div',function(e){
        if(highlightedDiv){
            highlightedDiv.style.backgroundColor='';
        }
        (highlightedDiv=this).style.backgroundColor = 'lightGray';
        e.stopPropagation();
    });
}
)()

</p>

</p>

4

2 に答える 2

5

あなたはイベントのバブリングに反しています - CSSだけでそれを行う方法がわかりません -

少しでも jQuery を使用したい場合は、次のように実行できます。

$("DIV").bind("hover",function(event){
    $(".Hover").removeClass("Hover");
    $(this).addClass("Hover");     
    event.stopPropagation();
 });

CSS:

div{
    padding-top:50px;
    margin:auto;
    border:1px solid lightGray;
    background:gray;
}
.Hover{
    background:lightGray;
}

秘訣は、イベントが他の div にバブリングするのを止めることです。実際の動作を見ることができます。

于 2012-05-23T01:32:45.040 に答える
0

divをネストすることはできません。それらを重ねてz-indexを設定すると、この効果にcssを使用できます。

http://jsfiddle.net/t9znR/

于 2012-05-23T01:38:41.777 に答える