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

原文地址：https://www.3mooc.com/front/articleinfo/188
jQuery过滤选择器使用练习：制作图片突出效果-来自于三人行慕课

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

首先布局HTML：

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

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

有没有很简单。

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

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