因為ant design沒有默認的蒙層插件，只有圖片上傳的頭像上傳類型存在懸浮顯示蒙層的樣式，所以我單獨寫了一個，懸浮顯示蒙層用來操作的，很多場景都可以用到，這里記下來。
原來樣式：

鼠標懸停樣式：

下面是寫法：

//jsx部分<div className={ styles.info}><span className={styles.actions}><Icon type='eye'/><Icon type='delete'/></span> </div>//css部分.info {box-sizing: content-box;position: absolute;top: 0;bottom: 0;left: 0px;right: 0px;overflow: hidden;&:before {content: ' ';position: absolute;z-index: 1;background-color: fade(#000, 50%);transition: all 0.3s;width: 100%;height: 100%;opacity: 0;} }.actions {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 10;white-space: nowrap;opacity: 0;transition: all 0.3s;i {z-index: 10;transition: all 0.3s;cursor: pointer;font-size: 16px;width: 16px;color: rgba(255,255,255,0.7);margin: 0 4px;&:hover {color: rgba(255,255,255,1);}} }.info:hover {&:before {opacity: 1;}.actions{opacity: 1;} }.info:hover + .actions, .actions:hover {opacity: 1; }

當然為了下次方便你也可以當成一個獨立的組件來使用

總結

以上是生活随笔為你收集整理的ant design图片hover蒙层的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。