javascript mouseout function flickering

마우스 기능에 따라 DIV를 보여 주거나 사라지게하는 효과가있는 마우스를 만들고 싶습니다. 나는 이것을 성공적으로 끝냈지 만, 머무를 때 대신 div 안에 im이있을 때 mouseout 함수가 깜박 거린다.javascript mouseout function flickering

Heres는 내 샘플 코드 :

<!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

어떤 mouseout 이벤트입니까? 그들 모두 또는 특히 –

마우스 이벤트 모두 –

20 개의 질문에 대해 유감입니다. 마우스 아웃 기능이 켜지고 꺼지는 것이 아니라, 특정 mouseout 이벤트 깜박임이 켜지거나 꺼지는 것입니다. 맞습니까? 마우스가 div 중 하나에서만 움직이거나 마우스가 div 중 하나에 고정되어있을 때 이런 현상이 발생합니까? –

사용 document.getElementById 대신 단지 getElementById하고 현재 요소를 참조 this 키워드를 사용할 수 있습니다 : 당신의 onmouseout 함수가되고있는 몇 가지 이유를 들어

<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

도움을 주셔서 감사합니다. 코드를 읽기 쉽도록 만들었지 만, 요소에서 여전히 깜박입니다. –

반복적으로 "onmousemove"라고 부름 ...이 솔루션은 반복적으로 호출되는 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를 함께 훨씬 쉬울 것 :이에게 주사를 ... 쉽게 (쌍 onmouseout /를 onMouseover와 중 하나를 그림) 나중에 변경을 적용 할 수 있도록하기 위해 약간의 코드를 다시 작성했습니다 이렇게하면 ... 작동하는지 알려주세요.

출처

2014-09-30 01:26:20

javascript mouseout function flickering

답변

관련 문제