jQuery高亮显示案例

文章目录

jQuery高亮显示案例

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>高亮显示案例</title>
     <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
     <style type="text/css">
         * {
             margin: 0;
             padding: 0;
         }
         ul {
             list-style: none;
         }
         body {
             background: pink;
         }
         .wrap {
             margin: 100px auto 0;
             width: 630px;
             height: 394px;
             padding: 10px 0 0 10px;
             background: rgb(31, 30, 30);
             overflow: hidden;
             border: 1px solid #fff;
         }
         .wrap li {
             float: left;
             margin: 0 10px 10px 0;
         }
 
         .wrap img {
             display: block;
             width: 200px; ;
             height: 200px ;
             border: 0;
         }
     </style>
     <script src="jquery.min.js"></script>
 </head>
 <body>
 <div class="wrap">
     <ul>
         <li>
             <a href="#"><img src="images/1.jpg" alt="" /></a>
         </li>
         <li>
             <a href="#"><img src="images/2.jpg" alt="" /></a>
         </li>
         <li>
             <a href="#"><img src="images/3.jpg" alt="" /></a>
         </li>
         <li>
             <a href="#"><img src="images/4.jpg" alt="" /></a>
         </li>
         <li>
             <a href="#"><img src="images/5.jpg" alt="" /></a>
         </li>
         <li>
             <a href="#"><img src="images/6.jpg" alt="" /></a>
         </li>
     </ul>
 </div>
 <script>
     //1.1 鼠标经过：其它兄弟li的透明度设置为50%
     // $(".wrap li").mouseover(function () {
     //     $(this).siblings().stop().fadeTo(400,0.5);
     // });
 
     //1.2 鼠标离开 其它兄弟li的透明度恢复
     // $(".wrap li").mouseout(function () {
     //     $(this).siblings().stop().fadeTo(400,1);
     // });
 
     //2 复合写法
     $(".wrap li").hover(function () {
         $(this).siblings().stop().fadeTo(400,0.5);
     },function () {
         $(this).siblings().stop().fadeTo(400,1);
     });
 </script>
 </body>
 </html>