javascript - 父标签中 固定 定位的子标签的问题。
本文介绍了javascript - 父标签中 固定 定位的子标签的问题。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<div class="be-center wrap" id="ww">
<i>...</i>
<i>...</i>
</div>其中的i标签是固定定位了的，而且是在父元素范围内，现在我想实现的是，移动到父标签范围内 输出1 移出父元素 输出2 ，用父元素的onmouseover,onmouseout
但是有一个问题就是，当移动到i标签时也会 输出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 再在红-绿之间移动，会输出一大堆**
这篇关于javascript - 父标签中 固定 定位的子标签的问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
