jQuery过滤选择器使用练习：制作图片突出效果-来自于三人行慕

原文地址：https://www.3mooc.com/front/articleinfo/188

jQuery过滤选择器使用练习：制作图片突出效果-来自于三人行慕课

我们经常在一些网站上看到图片突出效果，即若干个图片摆放在一起，当鼠标放到某一张图片上时，以其他图片变暗的方式突显这张图。大致效果如下：

首先布局HTML：

<div class="main">

    <ul>

      <li><img src="images/1.jpg" width="350px" height="200px" alt=""></li>

      <li><img src="images/6.png" width="350px" height="200px" alt=""></li>

      <li><img src="images/3.jpg" width="350px" height="200px" alt=""></li>

      <li><img src="images/4.jpg" width="350px" height="200px" alt=""></li>

      <li><img src="images/5.jpg" width="350px" height="200px" alt=""></li>

      <li><img src="images/2.jpg" width="350px" height="200px" alt=""></li>

    </ul>

  </div>

接下来简单调整一下css样式

<style>

      *{padding: 0;margin: 0}

      ul,li{list-style: none;}

        .main{width:1050px; height: 410px; 

        margin: 100px auto; 

        background-color: #000;}

        .main li {float: left; }

  </style>

有没有很简单。

再下一步就是要引入jq和编写jq代码来实现效果了

<script src="images/jquery-1.12.4.js"></script>

<script>

    $(function(){

        $(".main>ul>li").mouseenter(function(){

            $(this).css("opacity","1").siblings().css("opacity","0.3");

            $(".main").mouseleave(function(){

                $(this).find("li").css("opacity",1);

            })

        })

    });

</script>

就是这么简单,有没有很意外?主要熟悉使用siblings()和find()两个过滤选择器来实现效果,至于作者的布局好不好看，图片搭配美不美的问题就不要深究了。