滑鼠懸停新增遮罩及圖示。
阿新 • • 發佈：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>