Question

如果您查看此页面：http://wearewebstars.dk/frontend/Test/boerneunivers2.html 然后单击左侧导航中的ex：third链接，然后您将看到该链接现在是当前 - 然后如果您将鼠标悬停在第四个链接上，那么第三个链接中的宽度会发生变化吗？不知道为什么？任何帮助将不胜感激......

我使用jquery来悬停effekt，就像这样：

$(".left-navigation ul li:not(.current)").hover(function( e ){

     var mEnt = e.type=="mouseenter"; // boolean true/false

     $(this).stop().animate({width: mEnt?'100%':35}, mEnt?100:0, function() {
         $(this).find("span.nav-text").css({
             display: mEnt? "inline-block" : "none"
         });
     });

});

Answer 1

<li>的宽度变为100％。 <ul>的宽度取决于.left-navigation。由于未设置该宽度，因此其宽度与内容一样宽。因为悬停的<li>大于活动的悬停，所以ul会增长。

简单修复：

.left-navigation {
    width: 200px
}

Answer 2

我无法告诉您确切的问题，因为我认为您的导航根本不起作用。

但问题在于当前/悬停状态中%元素的li宽度。

百分比width具有父元素width的给定百分比用于元素的含义。由于ul中某些元素的width正在增长，因此当前元素的width也会增长。

为什么悬停在初始阶段与百分比一起工作我现在还不清楚，我需要仔细研究它。但希望这些信息已经对您有所帮助。

悬停时的宽度有趣吗？

2 个答案: