避免飘飘鼠标悬停

Question

我试图做一个左侧导航菜单我的网页，这是看起来像下面的图片：

这里是我所面临的问题的jsfiddle。 http://jsfiddle.net/rzr4Z/

我的HTML看起来像下面

<ul id="nav"> 
    <li><a href="#first-page" id="first_id">First</a><img src="images/navbar-icons/first.png" /> 
    </li> 
    <li><a href="#second-page" id="second_id">Second</a><img src="images/navbar-icons/second.png" /> 
    </li> 
    <li><a href="#third-page" id="third_id">Third</a><img src="images/navbar-icons/third.png" /> <img 
     src="images/navbar-icons/third.png" /> 
     <ul id="side-menu"> 
      <li><img src="images/navbar-icons/submenu-img.png" alt="sub menu image" /> 
      </li> 
      <li>Sub-menu item 1</li> 
      <li>Sub-menu item 2</li> 
      <li>Sub-menu item 1</li> 
     </ul></li> 
    <li><a href="fourth-page" id="fourth_id">Fourth</a><img src="images/navbar-icons/fourth.png" /> 
    </li> 
</ul> 

CSS：

ul#nav { 
    list-style-type: none; 
    margin: 10px 0; 
    padding: 0; 
    text-align: center; 
} 

ul#nav li { 
    font-size: 250%; 
    line-height: 25px; 
    padding: 7px 0; 
    margin: 0; 
} 

ul#nav li a { 
    display: block; 
} 

ul#nav li a:link,ul#nav li a:visited { 
    color: #333333; 
    text-decoration: none; 
} 

ul#nav li a:hover,ul#nav li a:active { 
    color: #a61607; 
    text-decoration: none; 
} 

ul#nav li img { 
    display: none; 
} 

ul#nav a:hover#first_id+img { 
    display: block; 
    position: relative; 
    top: -25px; 
} 

ul#nav a:hover#second_id+img { 
    display: block; 
    position: relative; 
    top: -25px; 
} 

ul#nav a:hover#third_id+img { 
    display: block; 
    position: relative; 
    top: -25px; 
} 

ul#nav a:hover#fourth_id+img { 
    display: block; 
    position: relative; 
    top: -25px; 
} 

ul#nav li ul#side-menu { 
    display: none; 
    position: absolute; 
} 

ul#nav li:hover ul#side-menu { 
    font-size: 30%; 
    list-style-type: none; 
    line-height: 2px; 
    color: #a61607; 
    text-decoration: none; 
    display: block; 
    position: absolute; 
    top: 310px; 
    left: 250px; 
} 

ul#nav li:hover ul#side-menu li { 
    float: none; 
} 

ul#nav li:hover ul#side-menu li img { 
    position: absolute; 
    top: 400px; 
    left: 0px; 
} 

而是做这样的事情的，

ul#nav a:hover+img { 
    display: block; 
    position: relative; 
    top: -25px; 
} 

我不得不使用不同的ID对每个因为每个元素都在css里的翻转图像具有不同的大小和宽度，以便我可以单独调整它们的相应翻转位置。是否以正确的方式使用不同的ID来获得所需的效果？

但是，主要的问题是，当我将鼠标悬停在每个菜单项的图像上时，我开始感觉到飘动的效果，并且悬停效果对于那种飘动的眼睛并不容易。 当鼠标悬停在#third-page菜单项上时，也不会出现子菜单的图像（子菜单项出现，但img未出现）。

关于如何解决这个飘动，并获得这个菜单的正确效果的任何建议？

Answer 1

在你的情况下使用不同的ID很好。至于飘飘的问题，我是能够改变你的CSS的这部分消除它：

ul#nav a:hover#first_id+img { 
    display: block; 
    position: relative; 
    top: -25px; 
} 

ul#nav a:hover#second_id+img { 
    display: block; 
    position: relative; 
    top: -25px; 
} 

ul#nav a:hover#third_id+img { 
    display: block; 
    position: relative; 
    top: -25px; 
} 

ul#nav a:hover#fourth_id+img { 
    display: block; 
    position: relative; 
    top: -25px; 
} 

这样：

ul#nav li:hover #first_id+img { 
    display: block; 
} 

ul#nav li:hover #second_id+img { 
    display: block; 
} 

ul#nav li:hover #third_id+img { 
    display: block; 
} 

ul#nav li:hover #fourth_id+img { 
    display: block; 
} 

发生了什么事是，当你将鼠标悬停在第三个环节，图像的大小将推动链接，使它在李的中心。如果您的鼠标恰好在图像出现后徘徊在链接的左侧或右侧，则您不再在链接上方悬停，因此它会消失，然后立即再次出现，因为现在您又一次在链接上方停留。等。

检测：将鼠标悬停在li本身上会修复此问题，以便在您将鼠标悬停在li上时显示图像，无论您是悬停在链接，图像还是其周围的任何空间。

希望这会有所帮助。

Answer 2

此问题发生时，我们不指定下面的CSS属性：

1. 最小宽度，最大宽度，和
2. 最小高度，最大高度

，小心使用以下css属性可以帮助：

#parent_id:hover 
{ 
    //use borders to find space required for correct width/height 
} 

#parent_id>#child_id:hover 
{ 
    //use borders to find space required for correct width/height 
} 

#parent_id:hover, #child_id:hover 
{ 
    //use borders to find space required for correct width/height 
} 

所以请确保您添加这些属性。

永远记住这一点：

决不做CSS无国界，始终确保你添加边框几乎所有节点， 这有助于清楚地了解被多少空间占用，更容易在CSS锻炼象这样的错误

ul#nav { 
list-style-type: none; 
margin: 0; 
padding: 0; 
text-align: center; 
position:absolute; 
height:300px; 
width:200px; 
max-height:300px; 
max-width:200px; 
border:5px solid red; 
overflow:hidden; 
} 

ul#nav li { 
border:1px solid green; 
font-size: 250%; 
line-height: 25px; 
max-height:200px; 
padding: 7px 0; 
margin-top: 10px; 
max-height:50px; 
} 
ul#nav li a { 
border:1px solid black; 
} 
ul#nav li a:link,ul#nav li a:visited { 
color: #333333; 
text-decoration: none; 
} 

ul#nav li a:hover,ul#nav li a:active { 
max-height:50px; 
color: #a61607; 
text-decoration: none; 
} 

ul#nav li img { 
display: none; 
} 

ul#nav a:hover#first_id+img { 
display: block; 
} 

ul#nav a:hover#second_id+img { 
display: block; 
} 

ul#nav a:hover#third_id+img { 
display: block; 
} 

ul#nav a:hover#fourth_id+img { 
display: block; 
} 

ul#nav li ul#side-menu { 
display: none; 
} 

ul#nav li:hover ul#side-menu { 
font-size: 30%; 
list-style-type: none; 
line-height: 2px; 
color: #a61607; 
text-decoration: none; 
display: block; 
position: absolute; 
top: 310px; 
left: 250px; 
} 

ul#nav li:hover ul#side-menu li { 
float: none; 
} 

ul#nav li:hover ul#side-menu li img { 
position: absolute; 
width:48px; 
height:48px; 
top: 400px; 
left: 0px; 
}​ 

现在不颤动

Answer 3

您的代码：

ul#nav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    position:absolute; 
    max-height:300px; 
    max-width:200px; 
    border:5px solid red; 
    overflow:hidden; 
} 

我的代码：

ul#nav { 
list-style-type: none; 
margin: 0; 
padding: 0; 
text-align: center; 
position:absolute; 
height:300px; 
width:200px; 
max-height:300px; 
max-width:200px; 
border:5px solid red; 
overflow:hidden; 
} 

仔细看我最后的答案，你已经错过了喜欢的高度显著属性：300像素;和宽度：200px;

---

简单地指定的最大值，最小值前缀属性是不够的，你应该添加特定的高度和宽度设置，只有飘飘消失。

Answer 4

你可以这样做：

ul#nav li a{display: block;} 

或

ul#nav li{text-align: left;} 

所以mouseleave不会对mouseenter

Answer 5

诀窍火来修复您的问题是两件事情：

1）制作LI项目固定宽度 2）使“悬停”效应发生在LI，而不是在A

之所以遇到“忽悠”正是一直如上所述。当您将:hover效果应用于A标记，并且标记的大小不固定时，您会在某些位置结束，其中鼠标导致:hover，:hover将导致它从鼠标下面移出的对象 - 以及导致效果结束，将对象放回到鼠标下 - 这会再次导致该效果。无休止的事业会给你带来闪烁的影响。

通过戴上LI代替:hover效果，导致:hover待提高鼠标是否在A或IMG - 所以当IMG标签弹出可见，一切都转移大小，鼠标依然徘徊在包含两个元素的LI - 瞧 - 不闪烁。

There is另一个问题是由于您的方法造成的，但是由于图像的大小。因为你的图片由于它们的高度（大图像）而向下分流 - 当你到达图像的底部并翻转下一个LI时，所有东西都会从鼠标下方移出，并导致类似的问题。然而，这通常不会导致闪烁。

请参阅以下update to your jsFiddle。如您所见，“高度”问题出现在“第三”条目上。这也可以通过明确设置高度/宽度以及使用精确大小的图像来解决 - 或者（更有效地）使用background: url(...); CSS规则而不是IMG标签 - 因为它们更容易剪辑/调整大小。

如果您需要其他一些基于CSS的翻转菜单和子菜单的示例，请参阅this jsFiddle，该示例演示了更为模块化的下拉菜单等方法。通过使用背景图形可以很容易地修改它以适应您的需求。