jquery - 悬停时的宽度很有趣？

Question

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

我已经将 jquery 用于悬停效果，如下所示：

$(".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

The width of the <li> becomes 100%. The width of the <ul> is dependent of the .left-navigation. Since that width isn't set, it as wide as the content. Because the <li> of the hover is bigger than the active one, the ul grows.

Simple fix:

.left-navigation {
    width: 200px
}

Answer 2

我不能告诉你确切的问题，因为我认为你的导航根本不应该工作。

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

百分比width的含义是给定的父width元素百分比。因为它ul的某些元素正在增长width，当前元素也在其增长width。

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