鼠标悬浮显示图标文字

 

重点：父级元素使用position:relative，子级元素使用position:absolute，进行定位。

鼠标悬浮

 let div = $(\'<div class="boxCardUploadImg" ondblclick="handlePictureCardPreview(this)"></div>\');
    let img = document.createElement(\'img\');
    let del = $(\'<i class="el-icon-delete" onclick="handleRemove(this);" style=""></i>\');
    $(del).css({\'position\':\'absolute\',\'top\':\'50%\',\'right\':\'15%\',\'color\':\'#fff\'});
    let sel = $(\'<i class="el-icon-delete" onclick="handleRemove(this);" style=""></i>\');
    let dow = $(\'<i class="el-icon-delete" onclick="handleRemove(this);" style=""></i>\');
    $(sel).css({\'position\':\'absolute\',\'top\':\'50%\',\'right\':\'43%\',\'color\':\'#fff\'});
    $(dow).css({\'position\':\'absolute\',\'top\':\'50%\',\'left\':\'15%\',\'color\':\'#fff\'});
    $(img).css({\'width\':\'100%\',\'height\':\'100%\'});
    $(img).css("border-radius","4px");

.boxCardUploadImg {
        width: 100px;
        height: 100px;
        margin: 1% !important;
        border-radius: 4px;
        position:relative;
    }
    .boxCardUploadImg:hover {
        cursor: pointer;
        background:rgba(0,0,0,0.5);
        transition: opacity .3s;
    }

    .boxCardUploadImg i  {
            display: none;
    }
    .boxCardUploadImg:hover i {
        display:initial;
    }