鼠标悬停添加遮罩及图标。
这个原理主要是使用了 ::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>
加油,愿被这世界温柔以待 ^_^