Question

我正在尝试创建一个div，它在鼠标悬停时弹出其父div并在mouseout上消失。但是当我在该div区域中输入鼠标时，它的高度没有明显增加，相反，即使鼠标在该区域内轻微移动，其高度也会连续上下闪烁（即鼠标没有从该区域中取出滑动时。）

查看工作代码：http://jsfiddle.net/ankur3291/xN5bS/

首先，我想知道mouseover和mouseout事件是如何工作的（它们的真正意义），其次，它的补救措施是什么？我基本上是在纯javascript中找到解决方案，但jQuery代码也很明显。请参阅下面的完整代码：

<!DOCTYPE html>
<html>
<head>
<title>js height check</title>
<style type="text/css">
#box{display:block;height:200px;width:200px;border:1px solid #000;position:relative;}
#inner{display:none;height:0;opacity:0.6;background-color:#000;width:200px;position:absolute;bottom:0;}
</style>
<script type="text/javascript">
function heightUp()
{
var h=20;
var obj=document.getElementById("inner");
obj.style.display="block";
function frame()
{
    h=h+5;
    obj.style.height=h+"px";
    if(h>=150)
        clearInterval(timer1);
}
var timer1=setInterval(frame,10);
}
function heightDown()
{
var obj=document.getElementById("inner");
var h=parseInt(obj.style.height);
document.getElementById("matter").innerHTML=h;
function frame()
{
    h=h-5;
    obj.style.height=h+"px";
    if(h>=30)
    {
        obj.style.display="none";
        clearInterval(timer2);
    }
}
var timer2=setInterval(frame,10);
//obj.style.height-=100+'px';
}
</script>
</head>
<body>
<div id="box" onmouseover="heightUp()" onmouseout="heightDown()">
<div id="inner">
</div>
</div>
<p id="matter">h</p>
</body>
</html>

Answer 1

这里的问题是当inner上升到光标点时，由于它位于box元素的“顶部”，因此您不再在技术上“超过”{{1}元素。因此，box事件会发生。

如果将mouseout添加到pointer-events: none的CSS声明中，这将起作用，因为您告诉该元素忽略指针事件。这样，模糊元素（inner）将接收事件。

这是a fiddle with it fixed。

此外，在分配事件处理程序时，不应使用box或onmouseover HTML属性，而应通过onmouseout接口执行此操作。（在IE8中是addEventListener，顺便说一句）

Answer 2

首先，事件分别为

MouseOver ：鼠标经过此元素（当您将鼠标移到此元素上时，这会继续调用问题）
MouseOut ：鼠标离开元素区域

但最好和最简单的方法是通过jquery按照以下方式实现你想要的效果

$(document).ready(function(){
  $("#box").hover(function(){
    //Mouse Enter

    $("#inner").animate({height: "200px"}, 500);
  },function(){
    //Mouse Leaves

    $("#inner").clearQueue();
    $("#inner").animate({height: "0px"}, 500);
  });

});

工作环节 http://jsfiddle.net/xN5bS/1/

javascript中的mouseover和mouseout事件无法正常工作

2 个答案: