Onmouseover/out

Question

我遇到兩個問題。

1. 鼠標懸停功能非常快，它絕對不能正常工作。我爲onmouseout狀態做了一個單獨的函數，但它沒有幫助。
2. 該類更改正確，但它保持更改，不會回到它的原始類。這取決於鏈接是否在選定頁面上。任何幫助將不勝感激

JAVASCRIPT：

function changeRollover(rollover) { 
    var rollItems = document.getElementById(rollover); 
    var rollLinks = rollItems.getElementsByTagName('a'); 
    var noOfLinks = rollLinks.length; 
    for (var r = 0; r < noOfLinks; r++) { 
     var normalText = rollLinks[r].innerHTML; 
     var rolloverText = rollLinks[r].title; 
     var rolloverItem = document.getElementById(rollover); 
     rolloverItem.innerHTML = "<a href='#' title='" + normalText + "'>" + rolloverText + "</a>"; 
     rolloverItem.class = rollover + "rollover";  
    } 
} 

HTML：

<div class="nav"> 
    <ul id="NavItems"> 
     <li id="item0" class="selected" onClick="changeClass(this.id)" 
         onmouseover="changeRollover(this.id)"> 
      <a href="#" title="Shop Trends">Collections</a> 
     </li> 
     <li id="item1" onClick="changeClass(this.id)" 
         onmouseover="changeRollover(this.id)"> 
      <a href="#" title="Shop Everything" >All Jewlery</a> 
     </li> 
     <li id="item2" onmouseover="changeRollover(this.id)" 
         onClick="changeClass(this.id)"> 
      <a href="#" title="Shop Press">As Seen On</a> 
     </li> 
     <li id="item3" onmouseover="changeRollover(this.id)" 
         onClick="changeClass(this.id)"> 
      <a href="#" title="fashion + shop">Collaborations</a> 
     </li> 
     <li id="item4" onmouseover="changeRollover(this.id)" 
         onClick="changeClass(this.id)"> 
      <a href="#" title="Shop Designer">Designer Pop Ups</a> 
     </li> 
    </ul> 
    <div class="shipping"> 
     <a href="#">start your free orders today<br> 
     *** click here for more information ***</a> 
    </div> 
</div> 
<!-- .nav --> 

Answer 1

你想（從可用性的角度來看半信半疑，但拋開）是更好的使用實現的效果一些簡單的CSS：

#NavItems .hover { 
    display: none; 
} 
#NavItems:hover .hover { 
    display: inline; 
} 
#NavItems:hover .normal { 
    display: none; 
} 

這需要類似這樣的標記：

<ul id="NavItems"> 
    <li id="item0"> 
    <a href="#"> 
     <span class="normal">Collections</span><span class="hover">Shop Trends</span> 
    </a> 
    </li> 
</ul> 

Answer 2

根據您的瀏覽器兼容性的要求，我建議使用OnMouseEnter在代替作爲觸發你的函數。

​​

但對於一件事，你就錯過了的onmouseout功能，可以重置類你。一旦你將一個類附加到一個元素上，它也必須手動刪除，如果你想讓它消失，這取決於用戶做了什麼。因此，創造這樣一個resetRollover功能，如下面的一個，並附加的onmouseout DOM監聽器觸發該功能：

function resetRollover(rollover) { 
    var className = document.getElementById(rollover).className; 

    document.getElementById(rollover).className = className.substring(0, indexOf(' rollover')); 
} 

Answer 3

的問題是你的onmouseover處理程序是在li s。當鼠標懸停在<li>中的<a>s並且<li>的「重新進入」onmouseover被再次觸發時。

示例here：這是與您的代碼相同的代碼，我添加了一些顏色。如果只在黑色部分（<li>）上移動鼠標，則會根據需要發生翻轉。但是當您將鼠標移動到綠色部分時（<a>）。

作爲一個解決方案，您可以處理在<a> S上的翻轉或改變自己的基本設計（見@Thomas的回答）