3

基本的な質問で申し訳ありませんが、ナビゲーション リストにホバー状態を追加しようとしていますが、親に影響を与えずに子の上にホバー状態を設定する方法がわかりません<li>。親<li>も技術的にホバリングされています。の方が理想的であることは承知してい.add/removeClass()ますが、私のテストでは、 の方が簡単でした.attr()。

これまでのところ、私は持っています:

私はhttp://jsfiddle.net/gSPkj/で jsfiddle をセットアップしていますが、以下はコードです-

HTML-

<div id="sidebarNav">
<ul>
    <li class="parent"><a href="page1.html">Page 1</a></li>
    <li class="parent"><a href="page2.html">Page 2</a></li>
    <li class="parent"><a href="page3.html">Page 3</a></li>
    <li class="parent"><a href="page4.html">Page 4</a>
        <ul>
            <li class="child"><a href="subpage_of_4-2.html">Subpage of 4 - 1</a></li>
            <li class="child"><a href="subpage_of_4-2.html">Subpage of 4 - 2</a></li>
        </ul>
    </li>
</ul>

jQuery -

    $("#sidebarNav li.parent").hover(function(){
$(this).attr("style","background:#123de1;color:#eb9028;");
},function(){
$(this).attr("style","background:#fff;color:#000;");
});
$("#sidebarNav li.child").hover(function(){
$(this).attr("style","background:#123de1;color:#eb9028;");
$(this).parents(".parent").attr("style","background:#fff;color:#000;");
},function(){
$(this).attr("style","background:#fff;color:#000;");
});
4

2 に答える 2

1

アンカーをターゲットにして、最も近い li 要素を見つけてスタイルを添付する方が簡単です。私は次のようにします：

$("#sidebarNav li > a").on('mouseenter mouseleave', function(e) {
    $(this).closest('li').css({
        background: (e.type == 'mouseenter' ? '#123de' : '#fff'),
        color:  (e.type == 'mouseenter' ? '#eb9028' : '#000')
    });
});

フィドル

于 2013-01-25T14:48:13.717 に答える
0

これは CSS のみで行うことができます

a:hover {
    background: #123de1;
    color: #eb9028;
}

変更された JSFiddle

本当に Javascript が必要な場合は、event.stopPropagation()を使用できます。

イベントが DOM ツリーをバブリングしないようにして、親ハンドラーにイベントが通知されないようにします。

$("#sidebarNav li.child").hover(function(e){
    e.stopPropagation();
    $(this).attr('style','background:#123de1;color:#eb9028;');
},function(e){
    e.stopPropagation();
    $(this).attr('style','background:#000;color:#fff;');
});

これにはまだ問題がありますが、子から親に、または逆に移動する場合。

変更された JSFiddle

于 2013-01-25T14:49:48.730 に答える