原文地址：https://www.3mooc.com/front/articleinfo/188
jQuery過濾選擇器使用練習：制作圖片突出效果-來自于三人行慕課
我們經(jīng)常在一些網(wǎng)站上看到圖片突出效果立由，即若干個圖片擺放在一起也榄，當鼠標放到某一張圖片上時谭梗，以其他圖片變暗的方式突顯這張圖陋守。大致效果如下：
首先布局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>
接下來簡單調(diào)整一下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代碼來實現(xiàn)效果了
<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()兩個過濾選擇器來實現(xiàn)效果,至于作者的布局好不好看，圖片搭配美不美的問題就不要深究了。
