码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 图片高亮显示

时间:2019-06-15 16:01:14      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:其他   sibling   one   img   div   css样式   去掉   hover   png   

主要的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         }

 

jQuery 图片高亮显示

标签:其他   sibling   one   img   div   css样式   去掉   hover   png   

原文地址:https://www.cnblogs.com/xiemin-minmin/p/11027342.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!