jquery突出展示案例

jquery突出展示案例

html:

        <div class="wrap">
            <ul>
                <li><a href="#"><img src="img/01.jpg"></a></li>
                <li><a href="#"><img src="img/02.jpg"></a></li>
                <li><a href="#"><img src="img/03.jpg"></a></li>
                <li><a href="#"><img src="img/04.jpg"></a></li>
                <li><a href="#"><img src="img/05.jpg"></a></li>
                <li><a href="#"><img src="img/06.jpg"></a></li>
            </ul>
        </div>

css:

            *{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
            }
            body{
                background: #000;
            }
            .wrap{
                margin: 100px auto 0;
                width: 630px;
                height: 394px;
                padding: 10px 0 0 10px;
                background: #000;
                overflow: hidden;
                border: 1px solid #fff;
            }
            .wrap li{
                float: left;
                margin: 0 10px 10px 0;
            }
            .wrap img{
                display: block;
                border: 0;
            }

jq:

        <script src="./js/jquery-3.5.1.min.js"></script>
        <script>
            $(function(){
                $('.wrap>ul>li').mouseenter(function(){
                    // // 1. 让 操作的这个li元素 透明度 是1
                    // $(this).css('opacity','1');
                    // // 2. 让 当前这个li的同级的兄弟li元素，他们的透明度都是0.4
                    // $(this).siblings().css('opacity','0.4');

                    $(this).css('opacity','1').siblings().css('opacity','0.4');
                })

                $('.wrap').mouseleave(function(){
                    $(this).find('li').css('opacity','1');
                })
            });
        </script>

分析：

mouseenter() 注册 鼠标移入事件----mouseenter([[data],fn])当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseleave() 注册 鼠标移出事情

css() 给一个元素 添加行内样式

siblings() 找 同辈的兄弟元素（集合）

find() 找子元素

children() 找子元素