鼠標經過自動彈出提示框

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

最終效果如下：