javascript - 元素的click和mouseover事件在兄弟结点间触发混乱。
本文介绍了javascript - 元素的click和mouseover事件在兄弟结点间触发混乱。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
多个兄弟结点，左右触发事件正常，垂直触发事件的时候，明明从兄弟1移动到快到兄弟3才触发兄弟2的事件
sass代码
.frontPage {
height:888px;
width: 600px;
left: 50%;
transform: translateX(-50%);
position: relative;
text-align:center;
top:-70px;
.block {
height: 150px;
box-shadow:3px 3px 8px #525252;
transition: all .4s ease;
margin-top:20px;
border:red 1px solid;
}
.block:hover{
transform:scale(1.2);
}
}
节点的截图
错误状态图，鼠标位置在画圈圈位置，但是mouseover事件没有切换到div2块，不懂为什么！
如果由下到上事件也能触发，而且没有问题，从上到下不知道为什么不可以！！！
解决方案
chrome/safari/firefox下测试没有问题~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<style>
.frontPage {
height: 888px;
width: 600px;
left: 50%;
transform: translateX(-50%);
position: relative;
text-align: center;
top: -70px;
}
.block {
height: 150px;
box-shadow:3px 3px 8px #525252;
transition: all .4s ease;
margin-top:20px;
border:red 1px solid;
}
.block:hover{
transform:scale(1.2);
}
</style>
</head>
<body>
<div class="frontPage">
<div class="block" style="background-color: red"></div>
<div class="block" style="background-color: #4a96d3"></div>
<div class="block" style="background-color: #00a23f"></div>
</div>
</body>
</html>这篇关于javascript - 元素的click和mouseover事件在兄弟结点间触发混乱。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
