鼠标经过自动弹出提示框

思路：首先写DOM结构，先编写若干div，隐藏弹窗部分，设置display为none，添加完样式后，通过js来判断是否鼠标经过，当鼠标经过，则触发弹出提示框事件，也就是将弹窗部分的display设置为block，鼠标移开，则将弹窗的display改为原始的none值。

html

<div class="wrap"> <div class="box"> <img src="#" alt="1"/> <span class="instr">说明一</span> <div class="popup">弹窗一</div> </div> <div class="box"> <img src="#" alt="图片"/> <span class="instr">说明一</span> <div class="popup">弹窗一</div> </div> <div class="box"> <img src="#" alt="图片"/> <span class="instr">说明一</span> <div class="popup">弹窗一</div> </div> <div class="box"> <img src="#" alt="图片"/> <span class="instr">说明一</span> <div class="popup">弹窗一</div> </div> <div class="box"> <img src="#" alt="图片"/> <span class="instr">说明一</span> <div class="popup">弹窗一</div> </div> <div class="box"> <img src="#" alt="图片"/> <span class="instr">说明一</span> <div class="popup">弹窗一</div> </div> <div class="box"> <img src="#" alt="图片"/> <span class="instr">说明一</span> <div class="popup">弹窗一</div> </div> <div class="box"> <img src="#" alt="图片"/> <span class="instr">说明一</span> <div class="popup">弹窗一</div> </div> </div>

css部分：

<style> .wrap{ font-size:0; width:400px; border:1px solid #000; } .box,.box img{ box-sizing:border-box; } .box{ position:relative; display:inline-block; margin-left:16px; margin-bottom:10px; height:100px; width:80px; vertical-align: top; border:1px solid #000; font-size:15px; } .box img{ margin-left:-1px; margin-top:-1px; height:80px; width:80px; border:1px solid #000; } span{ display:block; } .popup { display:none; position: absolute; top:-10px; left:50%; height: 50px; width: 100px; background:RGBa(53,70,255,0.4); color:#fff; font-size:15px; z-index:999999; }/*弹窗样式*/ </style>

让box添加边框后，为了计算方便给几个标签都加上了box-sizing：border-box值，与此同时又带来一个问题，img的边框和div的边框border重叠后会产生加粗的视觉效果 至于四条边都重叠为何是这两条加粗，我想和文档流的堆叠方向有关系。 于是利用负边距，给img标签加上margin-left:-1px; margin-top:-1px; 使得img往左和上移动1px 处理弹窗，弹窗的背景是需要有一个透明度的效果，而用opacity属性会将用该属性的元素的子元素都加上相同的透明度，因为这个是默认继承。 改用alpha，background:RGBa(53,70,255,0.4); 这样就只对背景起到增加透明度作用，而文字不受干扰

JS

<script> var ele=document.querySelectorAll(".box"); var popup=document.querySelectorAll(".popup"); var len=ele.length; for(var i=0;i<len;i++){ ele[i].onmouseover = function () { // var nleng=this.childNodes.length; // for (var j = 0; j < nleng; j++) { // if (this.childNodes[j].className == "popup") { // this.childNodes[j].style.display = "block"; // } // } //上述方法较为麻烦 this.getElementsByClassName("popup")[0].style.display="block"; };//鼠标移入 ele[i].onmouseout = function () { this.getElementsByClassName("popup")[0].style.display="none"; };//鼠标移出 } </script>

最终效果如下：