b站pink老师前端代码学习

CSS防土豆显示与隐藏效果

最新推荐文章于 2024-09-22 23:47:15 发布

转载最新推荐文章于 2024-09-22 23:47:15 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://www.bilibili.com/video/BV14J4114768?p=248

文章标签：

#html5 #css

本文介绍了一种使用CSS实现的图片防土豆显示及隐藏效果。通过定位和hover属性，当鼠标悬停在图片上时，会显示一个带有透明度和图标的效果层。文章提供了完整的HTML和CSS代码。

代码都是自己看视频敲得，视频链接在下面

先上效果图

主要用的就是定位，蛮简单的，代码如下

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>防土豆显示及隐藏</title>
       <style>
           .tudou{
               position: relative;
               height: 320px;
               width: 444px;
               margin: 50px auto;


           }
           .tudou img{
               height: 100%;
               width: 100%;
           }
           .mask{
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               background: rgb(0,0,0,.3) url(img/arr.png) no-repeat center;
           }

.tudou:hover .mask{
display: block;
}

       </style>
   </head>
   <body>
       <div class="tudou">
           <img src="img/tudou.jpg"/>
           <div class="mask"></div>


       </div>
   </body>
</html>