JavaScript的鼠標功能閃爍

我想創建一個鼠標進出效果，根據鼠標功能顯示和消失DIV的。我已經成功地完成了這個任務，但是當im在div內而不是繼續時，mouseout函數會閃爍。JavaScript的鼠標功能閃爍

繼承人我的示例代碼：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Kow Your Face</title> 
<style> 
#face { 
    background-image: url(face.png); 
    width: 262px; 
    height: 262px; 
    } 
#lefteye { 
    background-image: url(circle.png); 
    width: 28px; 
    height: 28px; 
    position: relative; 
    top: 69px; 
    left: 59px; 
    } 
#righteye { 
    background-image: url(circle.png); 
    width: 28px; 
    height: 28px; 
    position: relative; 
    top: 41px; 
    left: 167px; 
    } 
#mouth { 
    background-image: url(circle.png); 
    width: 28px; 
    height: 28px; 
    position: relative; 
    top: 84px; 
    left: 114px; 
    }   
</style> 
</head> 

<body> 
    <div id="face"> 
     <div id="lefteye" onMouseOver="getElementById('lefteye').style.visibility='hidden'; getElementById('lefteyedes').style.visibility='visible';" onMouseOut="getElementById('lefteye').style.visibility='visible'; getElementById('lefteyedes').style.visibility='hidden';"> 
     </div> 
     <div id="righteye" onMouseOver="getElementById('righteye').style.visibility='hidden'; getElementById('righteyedes').style.visibility='visible';" onMouseOut="getElementById('righteye').style.visibility='visible'; getElementById('righteyedes').style.visibility='hidden';"> 
     </div> 
     <div id="mouth" onMouseOver="getElementById('mouth').style.visibility='hidden'; getElementById('mouthdes').style.visibility='visible';" onMouseOut="getElementById('mouth').style.visibility='visible'; getElementById('mouthdes').style.visibility='hidden';"> 
     </div> 
    </div> 
    <div id="lefteyedes" style="visibility: hidden;"> 
    <p>Left Eye</p> 
    </div> 
    <div id="righteyedes" style="visibility: hidden;"> 
    <p>Right Eye</p> 
    </div> 
    <div id="mouthdes" style="visibility: hidden;"> 
    <p>Mouth</p> 
    </div> 
</body> 
</html>

來源

2014-09-27 Chris Campos

哪個鼠標事件？所有這些或1特別 – 2014-09-27 22:39:06

所有的鼠標事件 – 2014-09-29 21:48:48

對20個問題感到抱歉......所以這不是說，鼠標懸停功能開啓和關閉，它是綁定到一個特定的鼠標事件閃爍開始和關閉，正確的div？當鼠標移動到其中一個div內時，或者當鼠標在其中一個div內靜止時，會發生這種情況嗎？ – 2014-09-29 22:48:08

使用document.getElementById而不是隻getElementById，你可以使用this關鍵字來引用當前元素：

<div id="lefteye" onMouseOver="this.style.visibility='hidden'; document.getElementById('lefteyedes').style.visibility='visible';" onMouseOut="this.style.visibility='visible'; document.getElementById('lefteyedes').style.visibility='hidden';"> 
     </div>

來源

2014-09-27 22:40:19

謝謝你的幫助，你讓我的代碼更容易閱讀，但它仍然在元素中閃爍。 – 2014-09-29 21:46:51

出於某種原因，你的onmouseout功能正在反覆稱爲「onmousemove」...這個解決方案應該可以幫助你壓制被反覆調用的onmouseout函數。我已經重寫你的代碼一點，以幫助更容易地實施以後的變化（用的onmouseover的一個說明/的onmouseout對）......這給了一槍：

<script type="text/javascript"> 
    function leftEyeVisibility(vis1, vis2) { 
     //this function should work for the left eye when the left eye is hidden (lefteyedes is visible) and the mouse is moving over (or not moving at all) the hidden left eye div but has not moused out of it 
     var dg = document.getElementById("lefteye"); 
     var divStyle = window.getComputedStyle(dg, ""); 

     var mousePosition = function (e) { 
      var xCoord = e.pageX; 
      var yCoord = e.pageY; 
      return xCoord + "," + yCoord; 
     } 

     var positionArray = mousePosition.split(","); //split the xy coordinates returned by previous function 

     if ((positionArray[0] > dg.offsetLeft) && (positionArray[0] < dg.offsetLeft + dg.offsetWidth) && (positionArray[1] > dg.offsetTop) && (positionArray[1] < dg.offsetTop + dg.offsetHeight)) { 
      var mouseOverlap = 'yes'; 
     } else var mouseOverlap = 'no'; 

     if ((divStyle.visibility === 'hidden') && (mouseOverlap === 'yes')) { 
      return false; 
     } else { 
      document.getElementById("lefteye").style.visibility = vis1; 
      document.getElementById("lefteyedes").style.visibility = vis2; 
     } 
    }  
</script> 


<div id="lefteye" onmouseover="leftEyeVisibility('hidden', 'visible')" onmouseout="leftEyeVisibility('visible', 'hidden')"> 
</div>

使用jQuery它會更容易要做到這一點......讓我知道它是否有效。

來源

2014-09-30 01:26:20

JavaScript的鼠標功能閃爍

回答

相關問題