用几个div重叠在一块，底下的div的onmouseover事件会起作用吗？
发布网友
发布时间：2022-04-21 21:19
共2个回答
懂视网
时间：2022-04-22 01:40
当鼠标移到div1上的时候，会出现div2。出现时div2在div1的上面，div2在出现后发生闪烁的问题。
于是开始找问题根源，发现原来是因为当我们触发div1的时候，div2出现，但是div2是存在于div1上面的，所以当div2出现后，会又一次触发下面div1的事件。通常我们可能给的事件是mouseover和mouseout，因为两个div叠加，div2出现时会多次触发div1的事件，所以就会发生闪烁问题。
解决：
1.一开始换mouseenter和mouseleave，但是发现还是一样的问题。
注：
mouseover()与mouseout() 表示鼠标移入和移出的时候触发，穿过子元素也会触发
mouseenter()和mouseleave() 表示鼠标穿过和穿出时候触发，穿过子元素不会触发
2.然后又添加e.stopPropagation();阻止冒泡和e.preventDefault();阻止默认事件，还是没有对症。
注：
e.stopPropagation(); //阻止冒泡之后，就不会形成冒泡向上传递了。
e.preventDefault(); //阻止默认行为
3.最后换为切换事件toggle切换事件也不顶事儿。
4.最终，如果想用js解决这个问题可能不容易，用js基本都会发生闪烁问题。那么我们使用css方式是不是可以解决呢？网上查了很多资料，发现也有很多人遇到这个问题，使用的是css中的hover来解决的。
具体使用方法：
给两个div的父元素，也就是共同包裹两个div的盒子一个hover，当父元素hover时，div2的样式设置为display：block;于是就顺利解决了这个问题，不会再出现闪烁问题。
下面上代码：
html部分：
扫码有奖
.jpg)
css部分：
.fudiv:hover .div2 {
display: block;
}
.div2{
display: none;
}
原本jquery部分，这种方式会出现闪烁问题
热心网友
时间：2022-04-21 22:48
window.onload=function(){
var divs = document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
ee[i].onmouseover=function(){
alert("ok！");}
}
}
</script>
1、
<div>
<div></div>
</div>
如果div是这样布局的下面的div也会触发事件；
2、
<div style="float:left;"></div>
<div></div>
如果是这样布局 只触发最上面的div事件；
这是我测试的结果，因为也是正在学js，试着帮你回答一下
