javascript - jQuery - 当您将鼠标悬停在其子导航上时，主导航的底部黄色栏失去焦点

Question

示例：http: //jtstratford.advisorproducts.com/about

当您将鼠标悬停在其子导航上时，主导航的底部黄色栏会失去焦点 - 因此，当您将鼠标悬停在其子导航上时，它将保留在其主导航上。

下面是JS代码：

// DOM Ready
$(function () {

    var $el, leftPos, newWidth;

    /* Add Magic Line markup via JavaScript, because it ain't gonna work without */
    $("#magicLine").append("<li id='magic-line'></li>");

    /* Cache it */
    var $magicLine = $("#magic-line");

    $magicLine
        .width($(".selectednav").width())
        .css("left", $(".selectednav a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

    $("#magicLine > li").children("a").hover(function () {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();

        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function () {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
    });
}); 

Answer 1

您应该在列表元素而不是子锚点上执行悬停功能。

 $("#magicLine > li").hover(function...

这样，当您在同一个列表元素中时，不会触发鼠标移出效果。