本文主要是介绍仿土豆网显示隐藏遮罩案例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
代码：
<!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: 320px;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="images/tudou.jpg" alt=""></div><div class="tudou"><div class="mask"></div><img src="images/tudou.jpg" alt=""></div><div class="tudou"><div class="mask"></div><img src="images/tudou.jpg" alt=""></div><div class="tudou"><div class="mask"></div><img src="images/tudou.jpg" alt=""></div>
</body></html>
这篇关于仿土豆网显示隐藏遮罩案例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
