<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>仿土豆网显示暗藏遮罩案例</title><style> * { margin: 0; padding: 0; } .tudou { position: relative; width: 444px; height: 320px; background-color: pink; margin: 100px auto; } .tudou > img { width: 100%; height: 100%; } .tudou .mask { /* 暗藏遮罩层 */ display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4) url(./images/arr.png) no-repeat center center; } /* 当咱们鼠标通过了 土豆这个盒子，就让外面的遮罩层显示进去 */ .tudou:hover .mask { /* 显示元素 */ display: block; }</style></head>
<body>
<div class="tudou"> <img src="./images/tudou.jpg" alt="" /> <div class="mask"></div></div><div class="tudou"> <img src="./images/tudou.jpg" alt="" /> <div class="mask"></div></div><div class="tudou"> <img src="./images/tudou.jpg" alt="" /> <div class="mask"></div></div><div class="tudou"> <img src="./images/tudou.jpg" alt="" /> <div class="mask"></div></div><div class="tudou"> <img src="./images/tudou.jpg" alt="" /> <div class="mask"></div></div></body>
</html>