Question

我试图创建一个鼠标进出效果，根据鼠标功能显示和消除DIV。我已经成功完成了这项工作，但当我在div中而不是继续使用时，mouseout功能会闪烁。

见下我的示例代码：

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

Answer 1

使用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>

Answer 2

由于某种原因你的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可以更容易地做到这一点......让我知道它是否有效。

javascript mouseout函数闪烁

2 个答案: