javascript mouseout function мерцающий

Я пытаюсь создать эффект ввода и вывода мыши, который показывает и исчезает DIV в соответствии с функцией мыши. Я успешно это сделал, но функция mouseout мерцает и выключается, когда im внутри div вместо того, чтобы оставаться.javascript mouseout function мерцающий

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? Все они или 1, в частности –

Все события мыши –

извините за 20 вопросов ... так что это не значит, что функция mouseout мерцает и выключается, это значит, что divs, привязанные к определенному событию mouseout, включаются и выключаются, правильно? Это происходит, когда мышь перемещается внутри одного из div или только когда мышь находится в одном из div? –

Использование 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

Благодарим вас за помощь, вы сделали мой код более легким для чтения, но он все еще мерцает в элементе. –

По какой-то причине ваша 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 mouseout function мерцающий

ответ

Смежные вопросы