jQuery实现鼠标移入突出显示

最新推荐文章于 2024-07-30 23:06:43 发布

星月前端

最新推荐文章于 2024-07-30 23:06:43 发布

阅读量545

点赞数 2

分类专栏：网络笔记 javascript 文章标签： css html jquery 前端

本文链接：https://blog.csdn.net/qq_61950936/article/details/124905819

版权

笔记同时被 3 个专栏收录

110 篇文章 2 订阅

订阅专栏

javascript

20 篇文章 0 订阅

订阅专栏

网络

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: rgba(0, 0, 0, 0.507);
        }
        
        #wrap {
            position: absolute;
            /* height: 1200px; */
            width: 350px;
            /* float: left; */
            text-align: center;
            border: 1px solid red;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        #wrap ul li {
            display: inline-block;
            /* float: left; */
            margin-left: 5px;
        }
        
        #wrap ul {
            display: inline-block;
            margin-top: 10px;
            margin-bottom: 10px;
            /* float: left; */
        }
    </style>
</head>

<body>

    <div id="wrap">
        <ul>
            <li>
                <a href=""><img src="头像1.png" alt=""></a>
            </li>
            <li>
                <a href=""><img src="头像1.png" alt=""></a>
            </li>
            <li>
                <a href=""><img src="头像1.png" alt=""></a>
            </li>
            <li>
                <a href=""><img src="头像1.png" alt=""></a>
            </li>
            <li>
                <a href=""><img src="头像1.png" alt=""></a>
            </li>
            <li>
                <a href=""><img src="头像1.png" alt=""></a>
            </li>
        </ul>
    </div>
</body>

</html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function() {
        //获取li
        // $('#wrap li')
        $('#wrap li').mouseenter(function() {
            // console.log('1');
            //$(this).css('opacity', 1); 这个css的返回值就是本身
            $(this).css('opacity', 1).siblings('li').css('opacity', 0.4);
        });
        $('#wrap').mouseleave(function() {
            $('#wrap').find('li').css('opacity', 1);
        });

    });
</script>

效果：