滑鼠懸停新增遮罩及圖示。

意必固我_LRL發表於2020-10-25

這個原理主要是使用了 ::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>

 

 

相關文章