鼠标指针后，提示框将自动弹出

想法: 首先编写DOM结构，首先编写一些div，隐藏弹出窗口部分，将显示设置为none，添加样式后，使用js确定鼠标是否通过以及何时通过，它会触发一个弹出提示框事件，也就是将弹出窗口的显示设置为阻止并移开鼠标以将弹出窗口的显示更改为原始的none值.

html

<div class="wrap">
    <div class="box">
        "#" alt="1"/>
        class="instr">说明一
        <div class="popup">弹窗一div>
    div>
    <div class="box">
        "#" alt="图片"/>
        class="instr">说明一
        <div class="popup">弹窗一div>
    div>
    <div class="box">
        "#" alt="图片"/>
        class="instr">说明一
        <div class="popup">弹窗一div>
    div>
    <div class="box">
        "#" alt="图片"/>
        class="instr">说明一
        <div class="popup">弹窗一div>
    div>
    <div class="box">
        "#" alt="图片"/>
        class="instr">说明一
        <div class="popup">弹窗一div>
    div>
    <div class="box">
        "#" alt="图片"/>
        class="instr">说明一
        <div class="popup">弹窗一div>
    div>
    <div class="box">
        "#" alt="图片"/>
        class="instr">说明一
        <div class="popup">弹窗一div>
    div>
    <div class="box">
        "#" alt="图片"/>
        class="instr">说明一
        <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>

在框上添加边框后，为方便计算，将框大小: border-box值添加到多个标签中. 同时，这也带来了问题. img的边框和div的边框将重叠. 大胆的视觉效果

至于为什么四个边重叠，为什么两个边都加粗呢？我认为这与文档流的堆叠方向有关.

因此，使用负边距，添加margin-left: -1px; margin-top: -1px;到img标签.

使img左右移动1px

在处理弹出窗口时，弹出窗口的背景需要具有透明度效果，并且使用opacity属性将为使用该属性的元素的子元素添加相同的透明度，因为这是默认继承.

使用alpha，背景: 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;ifunction () {
//           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>

最终结果如下:

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-301781-1.html