jquery突出显示案例

版权声明：转载本文，请附录原文地址，如果错误，请联系我。 https://blog.csdn.net/qq_19880197/article/details/86627779

HTML

<div class="menu">
        <ul>
            <li><img src="images/1.jpg" alt="" width="200"></li>
            <li><img src="images/1.jpg" alt="" width="200"></li>
            <li><img src="images/1.jpg" alt="" width="200"></li>
            <li><img src="images/1.jpg" alt="" width="200"></li>
            <li><img src="images/1.jpg" alt="" width="200"></li>
            <li><img src="images/1.jpg" alt="" width="200"></li>
        </ul>
    </div>

CSS

*{
    padding: 0;
    margin: 0;
}
.clearfix:before,.clearfix:after{
    display: table;
    content: '';
}
.clearfix:after{
    clear:both;
}
.clearfix:before{
    *zoom: 1;
}
ul{
    list-style: none;
}
.menu{
    width: 618px;
    overflow: hidden;
    margin: 100px  auto;
    border: 5px solid palegoldenrod;
}

.menu li img{
    float: left;
    margin: 3px;
    display: block;
    box-sizing: border-box;
}

jquery

 <script src="jQuery库/jquery-1.12.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".menu ul li").mouseenter(function () {
                $(this).css("opacity","1").siblings("li").css("opacity","0.4");
            });
        });
    </script>