• 鼠标悬浮显示图标文字


    重点:父级元素使用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;
        }
  • 相关阅读:
    Redis
    Maven总结
    spring知识点总结
    网上好文搜集整理
    python 代码删除空目录
    plantUML使用指南
    python的基础操作
    八卦基础编程学习
    python历年入坑记录大全
    python实现的百度云自动下载
  • 原文地址:https://www.cnblogs.com/liruilong/p/13860878.html
Copyright © 2020-2023  润新知