猿问

父标签中 固定 定位的子标签的问题。

<div class="be-center wrap" id="ww">
      <i>...</i>
      <i>...</i></div>

其中的i标签是固定定位了的，而且是在父元素范围内，现在我想实现的是，移动到父标签范围内 输出1 移出父元素 输出2 ，用父元素的onmouseover,onmouseout

但是有一个问题就是，当移动到i标签时也会 输出2


慕丝7291255
浏览 823回答 1
1回答

慕姐8265434

onmouseover,onmouseout换成onmouseentet,onmouseleave<body>&nbsp; &nbsp; <div class="be-center wrap" id="ww">&nbsp; &nbsp; &nbsp; &nbsp; <i>A</i>&nbsp; &nbsp; </div>&nbsp; &nbsp; <style type="text/css">&nbsp; &nbsp; .wrap {&nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; width: 100px;&nbsp; &nbsp; &nbsp; &nbsp; height: 40px;&nbsp; &nbsp; &nbsp; &nbsp; background-color: #1abc9c;&nbsp; &nbsp; }&nbsp; &nbsp; .wrap i{&nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; width: 20px;&nbsp; &nbsp; &nbsp; &nbsp; height: 20px;&nbsp; &nbsp; &nbsp; &nbsp; left: 30px;&nbsp; &nbsp; &nbsp; &nbsp; top: 10px;&nbsp; &nbsp; &nbsp; &nbsp; color: #fff;&nbsp; &nbsp; &nbsp; &nbsp; background-color: #f55;&nbsp; &nbsp; }&nbsp; &nbsp; </style>&nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; var wrap = document.getElementsByTagName('div')[0];&nbsp; &nbsp; wrap.onmouseenter = function() {&nbsp; &nbsp; &nbsp; &nbsp; console.log(1);&nbsp; &nbsp; }&nbsp; &nbsp; wrap.onmouseleave = function() {&nbsp; &nbsp; &nbsp; &nbsp; console.log(2);&nbsp; &nbsp; }&nbsp; &nbsp; </script></body>**说明：一、把鼠标移动到绿色区域，输出1，移出输出2二、把鼠标从【绿色外面】直接移动到红色区域，输出1，注意，这里并不是移动到i输出了1，而是i在div内容，你直接移动到i上就等于移动到了div上。三、鼠标在绿色区域的时候，不停在红色-绿色之间移动，什么都不会输出，这证明移动到i上什么都没输出...还不信自己换成mouseover和mouseout 再在红-绿之间移动，会输出一大堆**
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答