鼠标悬停添加遮罩及图标。

这个原理主要是使用了 ::before或者::after 这个伪元素，和 :hover 这个伪类，

关于伪类和伪元素需要知道：

  • 伪类及在当前元素被出发后添加一些CSS样式，伪类与伪元素是预先定义的，独立于文档元素的，能后被浏览器自动识别，处于特殊状态的元素称为伪类，伪元素指元素中特变的一部分。伪类：以“：”开始，在冒号前后不能出现空白。

     

伪元素可以在触发之后添加一些，不在文档树里的内容。伪类：伪元素表示某元素的部分内容，虽然在逻辑上存在，但在文档树中并不存在与之对应的部分。 我想做成这个样子，这个ElementUI的上传组件的样式。

 

想做成这个样子，这个ElementUI的上传组件的样式。

 

 

 

 

做完之后是这个样子的：

 

 

 

可能我们还需要知道一点定位的知识；CSS提供三种定位机制：普通流，定位(position)，浮动(float)。

position属性：
可以将元素从页面流中偏移或分离出来，然后设定其具体的位置(top,bottom,right,left)，属性值如下；

当position的属性值为relative，absolute或fixed时，可以使用元素的偏移属性进行重新定位，当属性为static时,会忽略偏移属性以及z-index等相关属性。使用绝对定位相对定位时，会出现元素重叠，可以使用z-index属性设置元素之间的叠放顺序，取值为auto或数值时，数值越大越上层。在页面坐标中存在X右Y下Z外，

然后我们看一个Demo

 

复制代码
<style>
    .boxCardUploadImg {
        width: 300px;
        height: 400px;
        margin: 1% !important;
        border-radius: 4px;
        position:relative;
    }
    .boxCardUploadImg:hover {
        cursor: pointer;
    }
    .boxCardUploadImg:hover::after {
        content: '';
        background-color: rgba(0,0,0,0.5);
        position: absolute;
        left: 0;
        height: 100%;
        top: 0px;
        width: 100%;
        z-index: 99;
        border-radius: 4px;
    }

    .boxCardUploadImg i  {
            display: none;
    }
    .boxCardUploadImg:hover i {
        position: absolute;
        font-size: 40px;
        display:initial;
        z-index: 999;
        color: #fff;
        top: 50%;
    }
</style>
<body>
    <h1>Hello, world!</h1>
    <div style="display: flex;" id="apps" class="boxCardUploadImg">
        <img  src="C:\Users\admin\Desktop\bootstrap\img\img\uploadbutton.png"/ width="300px" height="400px">
        <i class="el-icon-delete" style="left: 15%;" ></i>
        <i class="el-icon-zoom-in" style="right: 15%;" ></i>
    </div>
</body>
复制代码

 

 

posted @   山河已无恙  阅读(1396)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛