Question

我试图获取当前活动菜单元素的位置，在其下面放置一行并使线跟随当前悬停的菜单项。它除了第一次定位外还可以。这是代码：

 function header_menu_line() {
    var $el, leftPos;
    $("#magic-line").remove();
    $("#main_menu").append("<li id='magic-line'></li>");
    var $magicLine = $("#magic-line");
    $magicLine
        .css("left", $(".current_menu_ancestor").position().left)
        .data("origLeft", $magicLine.position().left);
    console.log($(".current_menu_ancestor").position());
    $("#main_menu li").find("a").hover(function() {
        console.log($(".current_menu_ancestor").position());
        leftPos = $(this).position().left;
        $magicLine.stop().animate({
            left: leftPos
        }, 300);
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft")
        }, 300);    
    });
}

<ul id="main_menu">
    <li><a href="index.php">Home</a></li>
    <li><a href="news.php">News</a></li>
    <li><a href="about.php">About</a></li>
    <li class="current_menu_ancestor"><a href="contact.php">Contact</a></li>
</ul>

nav > ul{
    list-style: none;
    margin: 0;
    float: right;
    position: relative;
}

nav > ul > li{
    float: left;
}

nav > ul > li a{
    color: #c0ccd7;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
    padding: 0 10px;
    margin: 0 10px;
}

nav > ul > li a:hover{
    color: #fff;
}

#magic-line { 
    position: absolute;
    bottom: 0; 
    padding: 0 !important;
    margin: 0 !important;
    left: 0; 
    width: 100px; 
    height: 5px; 
}

在悬停内部定位工作正常，但我试图在悬停之前读取剩余位置，以便在鼠标移动时恢复。

对于第一个console.log我得到647并且对于控制台.log里面的hover我得到正确的值589 ..除了颜色值外，hover上的css没有任何变化。

请帮助，我为此疯狂..

修改我刚刚意识到相同的文件在服务器上按预期工作，但问题是我在本地运行它。我也试过朋友的电脑和同样的事情..

使用jQuery获取元素的错误位置

0 个答案: