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

突出显示find+siblings

<!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

相关文章: