鼠标经过自动弹出提示框

思路：首先写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>

最终效果如下：