Question

为基本问题道歉，但我试图将悬停状态添加到导航列表，似乎无法解决如何在不影响父<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;");
});

Answer 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')
    });
});

FIDDLE

Answer 2

您只能使用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

新手jQuery ancestory导航问题

2 个答案: