突出显示find+siblings

最新推荐文章于 2022-11-21 00:45:15 发布

zuo_zuo_blog

最新推荐文章于 2022-11-21 00:45:15 发布

阅读量181

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/89854098

版权

JQuery 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

鼠标放入li中，其他的li半透明，当前盒子，opacity值为1；离开wrap的时候所有的li全部opacity值为1；

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        body{
            background: #000000;
        }
        .wrap{
            margin: 100px auto;
            width:630px;
            height:394px;
            padding:10px 0 0 10px;
            background: #000000;
            overflow: hidden;
            border: 1px solid #ffffff;
        }
        .wrap li{
            float: left;
            margin:0 10px 10px 0;
        }
        .wrap img{
            display: block;
            border:0;
        }
    </style>
    <script src="js/jquery-1.11.1.js"></script>
    <script>
        $(window).ready(function () {
            $(".wrap").find("li").mouseenter(function () {
               $(this).css("opacity",1).siblings("li").css("opacity",0.5);
            });
            $(".wrap").mouseleave(function () {
               $(this).children().children("li").css("opacity",1);
            });
        });
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li><a href="#"><img src="imgs/01.jpg"></a></li>
        <li><a href="#"><img src="imgs/02.jpg"></a></li>
        <li><a href="#"><img src="imgs/03.jpg"></a></li>
        <li><a href="#"><img src="imgs/04.jpg"></a></li>
        <li><a href="#"><img src="imgs/05.jpg"></a></li>
        <li><a href="#"><img src="imgs/06.jpg"></a></li>
    </ul>
</div>
</body>
</html

zuo_zuo_blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
突出显示find+siblings

鼠标放入li中，其他的li半透明，当前盒子，opacity值为1；离开wrap的时候所有的li全部opacity值为1；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <st...
复制链接

扫一扫