<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>视频播放器显示隐藏遮罩案例</title> <style> .tudou { position: relative; width: 444px; height: 300px; background-color: pink; margin: 30px auto; } .tudou img { width: 100%; height: 100%; } .mask { /* 隐藏遮罩层 */ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center; } /* 当我们的鼠标经过时 土豆盒，让里面的遮罩层显示出来 */ .tudou:hover .mask { /* 而是显示元素 */ display: block; } </style> </head> <body> <div class="tudou"> <div class="mask"></div> <img src="tudou.jpg" alt=""> </div> <div class="tudou"> <div class="mask"></div> <img src="tudou.jpg" alt=""> </div> <div class="tudou"> <div class="mask"></div> <img src="tudou.jpg" alt=""> </div> <div class="tudou"> <div class="mask"></div> <img src="tudou.jpg" alt=""> </div> </body> </html>