鼠标悬停添加遮罩及图标
【摘要】 鼠标悬停添加遮罩及图标
之前项目中遇到这里总结下：
这个原理主要是使用了 ::before或者::after 这个伪元素，和 :hover 这个伪类，
关于伪类和伪元素需要知道：
伪类及在当前元素被出发后添加一些CSS样式，伪类与伪元素是预先定义的，独立于文档元素的，能后被浏览器自动识别，处于特殊状态的元素称为伪类，伪元素指元素中特变的一部分。伪类：以“：”开始，在冒号前后不能出现空白。
伪元素可以在触发之后添加一些，不在文档树里的内容。伪类：伪元素表示某元素的部分内容，虽然在逻辑上存在，但在文档树中并不存在与之对应的部分。
想做成这个样子，这个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>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）