jQuery学习笔记——图片突出效果实例

效果：

鼠标停留在图片上，对应图片高亮，其他图片变暗
鼠标离开盒子，所有图片变暗

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQurey</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        #box{
            overflow: hidden;
            margin: 100px auto;
            width: 940px;
            padding-left: 10px;
            padding-top: 10px;
            border: 1px solid #fff;
        }

        img{
            float: left;
            width: 300px;
            height: 200px;
            margin-right: 10px;
            margin-bottom: 10px;
            cursor: pointer;
        }

        
    </style>
    <script src="jquery-3.4.1.min.js"></script>
    <script>

        $(function(){

            //1.鼠标触碰li，透明度变为1，其他兄弟元素为0.4
            $('body').css('background','black');        
            $('#box li').mouseenter(function(){
                $(this).css('opacity','1').siblings('li').css('opacity','0.4');
            });


            //2.鼠标离开盒子，所有li标签透明度变为1
            $('#box').mouseleave(function () { 
                //方法一：
                // $('#box').find('li').css('opacity','1');

                //方法二：
                $(this).find('li').css('opacity','1');
             });
        });
            
    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li><img src="images/x1.jpg"></li>
            <li><img src="images/x2.jpg"></li>
            <li><img src="images/x3.jpg"></li>
            <li><img src="images/x4.jpg"></li>
            <li><img src="images/x5.jpg"></li>
            <li><img src="images/x6.jpg"></li>
        </ul>
    </div>
</body>
</html>

知识点&技巧

改变图片的opacity属性，可以设置透明度

利用this来表示当前操作的元素

jQuery学习笔记——图片突出效果实例

猜你喜欢