Question

所以，我想在这里实现的目标是想要一个水平导航栏，边框只显示悬停时，用鼠标在导航栏中的其他链接上滑动，并将鼠标移开除当前活动页面外，导航栏再次隐藏边框。我在某个地方见过这个，但我不记得在哪里。它与this类似，但没有快照。当没有任何东西悬停时，边界应该消失。我对jQuery这方面的经验不是很有经验，所以我问任何有想法的人，尽可能简单地尝试解释它。我试过在这个动画上搜索几天无济于事。如果在纯CSS中也可以这样做，那也很好，但我不确定是因为它取决于光标的移动。提前感谢大家。

Answer 1

看看这个JSFIDDLE DEMO

一些JS功能

$("#example-one").append("<li id='magic-line'></li>");

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

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

    $("#example-one li").find("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")
        });    
    });

如何在悬停时在链接上制作水平动画边框？

1 个答案: