<div class="be-center wrap" id="ww">
<i>...</i>
<i>...</i></div>其中的i标签是固定定位了的，而且是在父元素范围内，现在我想实现的是，移动到父标签范围内 输出1 移出父元素 输出2 ，用父元素的onmouseover,onmouseout但是有一个问题就是，当移动到i标签时也会 输出2
1 回答
慕姐8265434
TA贡献1813条经验 获得超2个赞
onmouseover,onmouseout换成onmouseentet,onmouseleave
<body>
<div class="be-center wrap" id="ww">
<i>A</i>
</div>
<style type="text/css">
.wrap {
position: relative;
width: 100px;
height: 40px;
background-color: #1abc9c;
}
.wrap i{
position: absolute;
width: 20px;
height: 20px;
left: 30px;
top: 10px;
color: #fff;
background-color: #f55;
}
</style>
<script type="text/javascript">
var wrap = document.getElementsByTagName('div')[0];
wrap.onmouseenter = function() {
console.log(1);
}
wrap.onmouseleave = function() {
console.log(2);
}
</script>
</body>
**说明：
一、把鼠标移动到绿色区域，输出1，移出输出2
二、把鼠标从【绿色外面】直接移动到红色区域，输出1，注意，这里并不是移动到i输出了1，而是i在div内容，你直接移动到i上就等于移动到了div上。
三、鼠标在绿色区域的时候，不停在红色-绿色之间移动，什么都不会输出，这证明移动到i上什么都没输出...还不信自己换成mouseover和mouseout 再在红-绿之间移动，会输出一大堆**
添加回答
举报
0/150
提交
取消