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

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

javascript jquery css

javascript中的mouseover和mouseout事件无法正常工作,javascript,jquery,css,Javascript,Jquery,Css,我试图制作一个div，它在mouseover上弹出，在mouseout上消失。但是，当我在该div区域中输入鼠标时，其高度并未明显增加，而是在该区域内鼠标轻微移动时，其高度会持续上下闪烁（即，滑动时鼠标未移出该区域）参见工作代码：首先，我想知道mouseover和mouseout事件是如何工作的（它们的真正含义），其次，它的补救方法是什么？我基本上是在纯javascript中找到解决方案的，但是jQuery代码也很有用。请参阅下面我的完整代码： <!DOCTYPE html> &

我试图制作一个div，它在mouseover上弹出，在mouseout上消失。但是，当我在该div区域中输入鼠标时，其高度并未明显增加，而是在该区域内鼠标轻微移动时，其高度会持续上下闪烁（即，滑动时鼠标未移出该区域）

参见工作代码：

首先，我想知道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>


js高度检查
#框{显示：块；高度：200px；宽度：200px；边框：1px实心#000；位置：相对；}
#内部{显示：无；高度：0；不透明度：0.6；背景色：#000；宽度：200px；位置：绝对；底部：0；}
函数heightUp（）
{
var h=20；
var obj=document.getElementById（“内部”）；
obj.style.display=“块”；
函数框架（）
{
h=h+5；
对象样式高度=h+“px”；
如果（h>=150）
清除间隔（计时器1）；
}
var timer1=设置间隔（帧，10）；
}
函数heightDown（）
{
var obj=document.getElementById（“内部”）；
var h=parseInt（对象样式高度）；
document.getElementById（“物质”）.innerHTML=h；
函数框架（）
{
h=h-5；
对象样式高度=h+“px”；
如果（h>=30）
{
obj.style.display=“无”；
清除间隔（计时器2）；
}
}
var timer2=设置间隔（帧，10）；
//物体样式高度-=100+'px'；
}
h

这里的问题是，当

内部

上升到光标点时，由于它位于

框

元素的“顶部”，从技术上讲，您不再“在”框元素上方。因此，

mouseout

事件触发

如果将

指针事件：none

添加到

内部

的CSS声明中，这将起作用，因为您告诉该元素忽略指针事件。这样，被遮挡的元素（

框

）将接收事件

这是一个例子

另外，在分配事件处理程序时，不应使用

onmouseover

或

onmouseout

HTML属性，而应通过

addEventListener

接口执行。（顺便说一句，在IE8中是

attachEvent

）

这里的问题是，当

内部

上升到光标的位置时，由于它位于

框

元素的“顶部”，从技术上讲，您不再“覆盖”框

元素。因此，mouseout
事件触发
如果将指针事件：none
添加到内部
的CSS声明中，这将起作用，因为您告诉该元素忽略指针事件。这样，被遮挡的元素（框
）将接收事件
这是一个例子
另外，在分配事件处理程序时，不应使用onmouseover
或onmouseout
HTML属性，而应通过addEventListener
接口执行。（顺便说一句，在IE8中是attachEvent
）
这里的问题是，当内部
上升到光标的位置时，由于它位于框
元素的“顶部”，从技术上讲，您不再“覆盖”框元素。因此，mouseout
事件触发
如果将指针事件：none
添加到内部
的CSS声明中，这将起作用，因为您告诉该元素忽略指针事件。这样，被遮挡的元素（框
）将接收事件
这是一个例子
另外，在分配事件处理程序时，不应使用onmouseover
或onmouseout
HTML属性，而应通过addEventListener
接口执行。（顺便说一句，在IE8中是attachEvent
）
这里的问题是，当内部
上升到光标的位置时，由于它位于框
元素的“顶部”，从技术上讲，您不再“覆盖”框元素。因此，mouseout
事件触发
如果将指针事件：none
添加到内部
的CSS声明中，这将起作用，因为您告诉该元素忽略指针事件。这样，被遮挡的元素（框
）将接收事件
这是一个例子
另外，在分配事件处理程序时，不应使用onmouseover
或onmouseout
HTML属性，而应通过addEventListener
接口执行。（这是IE8中的attachEvent
，顺便说一句）
首先，事件分别

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);
  });

});

工作环节
首先，事件分别进行

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);
  });

});

工作环节
首先，事件分别进行

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);
  });

});

工作环节
首先，事件分别进行

MouseOver：鼠标经过此元素（此元素将继续调用