jq实现鼠标悬停高亮当前图片

拼搏现实的明天。 2023-06-05 08:09 64阅读 0赞 
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.   <meta charset="UTF-8">
  5.   <title></title>
  6.   <style>
  7.     *{margin: 0;padding: 0;}
  8.     body {background-color: black;}
  9.   .box {
  10.     margin: 100px auto;width: 630px;height: 394px;
  11.     border: 2px solid white; background-color: black;
  12.     padding: 10px;
  13.   }
  14.   ul {list-style: none;}
  15.   ul li {
  16.     float: left; padding: 5px;
  17.   }
  18.   </style>
  19. </head>
  20. <body>
  21. <div class="box">
  22.   <ul>
  23.     <li><a href="#"><img src="images/01.jpg"></a></li>
  24.     <li><a href="#"><img src="images/02.jpg"></a></li>
  25.     <li><a href="#"><img src="images/03.jpg"></a></li>
  26.     <li><a href="#"><img src="images/04.jpg"></a></li>
  27.     <li><a href="#"><img src="images/05.jpg"></a></li>
  28.     <li><a href="#"><img src="images/06.jpg"></a></li>
  29.   </ul>
  30. </div>
  32. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  33. <script>
  34.   $(function(){
  35.     $("li").mouseenter(function(){
  36.       $(this).css("opacity","1").siblings().css("opacity","0.4");
  37.     });
  38.     $("li").mouseleave(function(){
  39.       $("li").css("opacity","1");
  40.     });
  41.   });
  42. </script>
  43. </body>
  44. </html>

转载于:https://www.cnblogs.com/sandraryan/p/11072392.html

发表评论

表情：
评论列表 （有 0 条评论，64人围观）

还没有评论，来说两句吧...

相关阅读