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

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

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

这样，当您位于同一个列表元素中时，您的鼠标移开效果将不会被触发。