Question

我想我在这里被误解了，所以我会重新解释我的问题。问题：当我“悬停”在菜单上时，带有“问题”的黑色跨度跟随我的鼠标，但它会弄乱它的位置，因为我不喜欢我知道要正确计算:( 尝试将鼠标悬停在我的菜单上以查看问题。 试图用两天时间来解决这个问题，但没有成功......

FIDDLE HERE

以下是我网站的LINK。

任何帮助或建议？

$(document).ready(function(){
    $('.menu ul li').hover(function(){
        var index=$(this).index();
        var width=$(this).outerWidth();        
        $('.problem').stop().animate({'marginLeft':135*index+195,'width':width},1000);     
    });
});

Answer 1

将菜单div的CSS设置为：

width://insert wanted width here
margin:auto;

使用固定宽度和自动边距，CSS将使您的div居中。

Answer 2

我首先要更新.menu样式：

float: none;
width: 715px;
height: 30px;
display: block;
position: relative;
margin: 9px auto;

然后，您需要将活动元素移到其后面，您可以通过应用否定top-margin

来执行此操作

如何重新计算正确的位置

2 个答案: