避免飄飄鼠標懸停

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，該示例演示了更爲模塊化的下拉菜單等方法。通過使用背景圖形可以很容易地修改它以適應您的需求。