jQuery效果的淡入淡出的案例

最新推荐文章于 2022-09-04 23:56:48 发布

呆呆怪兽

最新推荐文章于 2022-09-04 23:56:48 发布

阅读量269

点赞数 1

分类专栏： jQuery案例文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_45658984/article/details/104498122

版权

jQuery案例专栏收录该内容

8 篇文章 1 订阅

订阅专栏

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body {
        background-color: black;
    }
    
    .box {
        position: absolute;
        width: 780px;
        height: 520px;
        padding: 5px;
        border: 2px solid white;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /* 弹性盒子 */
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-content: space-between;
    }
    
    .box .pic1 {
        width: 250px;
        height: 250px;
    }
    
    img {
        width: 250px;
        height: 250px;
    }
</style>

<body>
    <div class="box">
        <div class="pic1"><img src="img/1.jpg" alt=""></div>
        <div class="pic1"><img src="img/2.jpg" alt=""></div>
        <div class="pic1"><img src="img/3.jpg" alt=""></div>
        <div class="pic1"><img src="img/4.jpg" alt=""></div>
        <div class="pic1"><img src="img/5.jpg" alt=""></div>
        <div class="pic1"><img src="img/6.jpg" alt=""></div>
    </div>
    <script>
        $(function() {
            // hover是鼠标经过和离开的复合事件,第一个function是鼠标经过事件
            // 第二个function是鼠标离开事件.
            $('.box > div').hover(function() {
                $(this).siblings().stop().fadeTo(100, 0.5);
            }, function() {
                $(this).siblings().stop().fadeTo(100, 1)

            })
        })
    </script>
</body>