图片遮罩问题

最新推荐文章于 2023-05-31 19:22:39 发布

W_violet

最新推荐文章于 2023-05-31 19:22:39 发布

阅读量604

点赞数

本文链接：https://blog.youkuaiyun.com/W_violet/article/details/83383786

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
       .photos{
           width: 900px;
           height: 500px;
          background-color: black;

       }
       li{
           display: inline-block;
           height: 200px;
           width: 250px;
           margin-top: 10px;
           margin-left: 5px;
       }
        ul{
            list-style-type: none;
            margin-top: 5px;
        }
        #first1{
            background-image:url('01.jpg');
            background-size: cover;
            background-color: rgba(120,120,120,0.5);
        }
       #first2{
           background-image:url('02.jpg');
           background-size: cover;
       }
       #first3{
           background-image:url('03.jpg');
           background-size: cover;
       }
       #first4{
           background-image:url('04.jpg');
           background-size: cover;
       }
       #first5{
           background-image:url('05.jpg');
           background-size: cover;
       }
       #first6{
           background-image:url('06.jpg');
           background-size: cover;
       }
       .zhezao{
           height: 200px;
           width: 250px;
           /*background-color: rgba(120,120,120,0.5);*/
       }
    </style>
    <script type="text/javascript" src="lib/jquery-3.1.1.min.js"></script>
    <script>
           $(document).ready(function(){
                  $('li').mouseover(function(){
//                      当鼠标移入的时候，该元素的兄弟元素设置为遮罩
                      $(this).siblings().children().css("background-color","rgba(0,0,0,0.5)")
                  })

               $('li').mouseout(function(){
//                   当移出的时候，当前兄弟元素的背景颜色设置不透明
                   $(this).siblings().children().css("background-color","rgba(0,0,0,0)")
               })
           })
    </script>
</head>
<body>
    <div class="photos">
        <ul class="">
            <li id="first1"><div class="zhezao"></div></li>
            <li id="first2"><div class="zhezao"></div></li>
            <li id="first3"><div class="zhezao"></div></li>
            <li id="first4"><div class="zhezao"></div></li>
            <li id="first5"><div class="zhezao"></div></li>
            <li id="first6"><div class="zhezao"></div></li>
        </ul>
    </div>
</body>
</html>