Question

我仍然有问题将背景图像置于链接下方，mouseleave不会完全返回列表的中心，需要一些帮助。谢谢！

我正在将一个简单的菜单放入一个带有动画的列表中，该动画跟随mouseover上的光标，然后返回到mouseleave上的当前位置。

我希望在页面加载时始终低于当前位置，那么如何在边距为0的div中计算这个？这样的事情example。

/*jQuery*/
$('li').mouseover( function() {    

    var top = $(this).offset().top + $(this).height() + 5;
    var left = $(this).offset().left + ($(this).width() / 2);

    $('#marker').stop().animate( { top: top, left: left  }, 200 );

});

$('li').mouseleave( function() { 

});

我希望一切都足够清楚，以便你的帮助！

Answer 1

将类添加到当前页面。改变mouseleave。 Jsfiddle

HTML

<div id="menu-wrapper">
    <ul>
        <li>Menu1</li>
        <li class="currentpage">Menu2</li>
        <li>Menu3</li>    
        <li>Menu4</li>    
        <li>Menu5</li>        

    </ul>    

    <div id="marker">*</div>

</div>

的Javascript

$('li').mouseleave( function() { 
    var top = $('.currentpage').offset().top + $(this).height() + 5;
    var left = $('.currentpage').offset().left + ($(this).width() / 2);

    $('#marker').stop().animate( { top: top, left: left  }, 200 );    
});

jQuery鼠标悬停菜单动画

1 个答案: