妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 2018|回复: 2

[求助] 练习有问题

[复制链接]
挽风曲 发表于 2017-1-21 18:26:46 | 显示全部楼层 |阅读模式
鼠标移入img,div显示出来,鼠标移动到div这个层上面,就不停闪硕。该如何解决?  
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title></title>
  6.                 <script type="text/javascript">
  7.                         window.onload=function(){
  8.                                 var oBox = document.getElementById('box');
  9.                                 var oDiv = oBox.getElementsByTagName('div')[0];
  10.                                 var oimg = oBox.getElementsByTagName('img');
  11.                                 var opic = document.getElementsByClassName('bg')[0];
  12.                                
  13.                                 var arr = ['给我看看1','给我看看2','给我看看3'];
  14.                                
  15.                                 for (var i = 0; i < oimg.length; i++) {
  16.                                         oimg[i].index = i;
  17.                                         oimg[i].onmouseover = function(){
  18.                                                 var oWidth = this.offsetWidth;
  19.                                                 var oLL = this.offsetLeft;
  20.                                                 var oTL = this.offsetTop + this.offsetHeight;
  21.                                                 //创建元素
  22.                                                 var oBg = document.createElement('div');
  23.                                                 oBg.className = 'bg';
  24.                                                 oBg.innerHTML = arr[this.index];
  25.                                                 oBg.style.width = oWidth+'px';
  26.                                                 oBg.style.left = oLL+'px';
  27.                                                 oBg.style.top = oTL-50+'px';
  28.                                                 oDiv.appendChild(oBg);       
  29. }
  30.                                         oimg[i].onmouseout = function(){
  31.                                                 oDiv.removeChild(oDiv.lastChild);
  32.                                         }
  33. }
  34. }
  35. </script>
  36. <style type="text/css">
  37.                         .clear{zoom: 1;}
  38.                         .clear:after{ content: "";display: block;clear: both;}
  39.                         #box{position: relative;width: 1000px;height: 572px;margin: 60px auto 0;
  40.                         }
  41.                         .bg{position: absolute;height: 50px;font:20px/50px "微软雅黑";text-align: center;
  42.                                 background: red;filter:alpha(opacity=50); opacity:0.5;z-index: 2;
  43.                         }
  44.                         .pic img {position: absolute;}
  45. .pic img:nth-child(1) {height: 290px;width: 316px;top: 0;left: 0;}
  46. .pic img:nth-child(2) {height: 290px;width: 204px;top: 0;left: 336px;}
  47. .pic img:nth-child(3) {height: 290px;width: 204px;top: 0;left: 560px;}
  48. </style>
  49.         </head>
  50.         <body>
  51.                 <div id='box'>
  52.                         <div class="pic">
  53.                                                         <img src="img/1.jpg" name="1"/>
  54.                                                         <img src="img/1.jpg"/>
  55.                                                         <img src="img/1.jpg"/>       
  56.                                 </div>
  57.                 </div>
  58.         </body>
  59. </html>
复制代码


回复

使用道具 举报

大熊小车 发表于 2017-2-5 10:52:01 | 显示全部楼层
同学你好。

问题是这样的,当鼠标移入到oDiv上,创建oBg,当鼠标移出的时候移除oBg,

当鼠标移动到oDiv上,obg出现后,鼠标就已经在obg上了,会触发oDiv的移出
回复 支持 反对

使用道具 举报

 楼主| 挽风曲 发表于 2017-2-5 19:44:17 | 显示全部楼层
大熊小车 发表于 2017-2-5 10:52
同学你好。

问题是这样的,当鼠标移入到oDiv上,创建oBg,当鼠标移出的时候移除oBg,

要这么修改,才不会使鼠标移入到obg不停闪烁
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-1-16 20:41 , Processed in 0.118303 second(s), 21 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表