簡單分享下，劃過一張圖片其余圖片變暗，圖片劃過變暗的簡單效果，JQ實現主要是css寫法跟思路變化。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function (){$(".n_pagescon_img li").eq(0).addClass("")$(".n_pagescon_img li").hover(function () { $(this).siblings().find("img").css("opacity", 0.6); },function () { $(".n_pagescon_img li").find("img").css("opacity", 1); })}); </script>

?

?

注意當中的 li 有背景色

.n_pagescon_img{padding-top:151px;} .n_pagescon_img li{float:left;width:320px;height:501px; background-color:#000;margin-right:10px;overflow:hidden;} .n_pagescon_img li.bnone{margin:0;} .n_pagescon_img li img{opacity: 1;} .n_pagesimg img{display:block;}

轉載于:https://www.cnblogs.com/ninali/p/3148303.html

總結

以上是生活随笔為你收集整理的JQ基础练习---图片划过变暗的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。