jQuery 图片高亮显示

主要的jQuery代码：

 1  $(function() {
 2             $("ul li").hover(function() {
 3                 // over
 4                 //鼠标移入当前列透明度为1 其他列为0.5
 5                 $(this).css("opaacity", "1").siblings("li").addClass("opacity_li");
 6 
 7             }, function() {
 8                 // out
 9                 //鼠标移出的时候把其他列透明度去掉
10                 $(this).siblings().removeClass("opacity_li");
11             });
12         })

html代码：

 1 <ul>
 2         <li>
 3             <a href="#"><img src="images/问奈何.png" alt="" /></a>
 4         </li>
 5         <li>
 6             <a href="#"><img src="images/夏承凛.png" alt="" /></a>
 7         </li>
 8         <li>
 9             <a href="#"><img src="images/怀璧明罪问奈何.png" alt="" /></a>
10         </li>
11     </ul>

css样式：

 1 * {
 2             margin: 0;
 3             padding: 0;
 4         }
 5         
 6         ul {
 7             list-style: none;
 8             margin: 0 auto;
 9             width: 608px;
10             height: 342px;
11         }
12         
13         img {
14             width: 40%;
15             height: 40%;
16         }
17         
18         .opacity_li {
19             opacity: 0.5;
20         }

 

转载于:https://www.cnblogs.com/xiemin-minmin/p/11027342.html