jQuery 图片高亮显示

Posted 2022-01-12 xiemin-minmin

主要的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"  /></a>
 4         </li>
 5         <li>
 6             <a href="#"><img src="images/夏承凛.png"  /></a>
 7         </li>
 8         <li>
 9             <a href="#"><img src="images/怀璧明罪问奈何.png"  /></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