zoukankan      html  css  js  c++  java
  • 鼠标悬停添加遮罩及图标。

    这个原理主要是使用了 ::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:UsersadminDesktopootstrapimgimguploadbutton.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>

  • 相关阅读:
    hdu6229 Wandering Robots 2017沈阳区域赛M题 思维加map
    hdu6223 Infinite Fraction Path 2017沈阳区域赛G题 bfs加剪枝(好题)
    hdu6438 Buy and Resell 买卖物品 ccpc网络赛 贪心
    hdu6441 Find Integer 求勾股数 费马大定理
    bzoj 1176 Mokia
    luogu 3415 祭坛
    bzoj 1010 玩具装箱
    bzoj 3312 No Change
    luogu 3383【模板】线性筛素数
    bzoj 1067 降雨量
  • 原文地址:https://www.cnblogs.com/liruilong/p/13873109.html
Copyright © 2011-2022 走看看