鼠标悬停高亮当前图片

Posted 2022-02-03 sandraryan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标悬停高亮当前图片相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    *margin: 0;padding: 0;
    body background-color: black;
  .box 
    margin: 100px auto;width: 630px;height: 394px;
    border: 2px solid white; background-color: black;
    padding: 10px;
  
  ul list-style: none;
  ul li 
    float: left; padding: 5px;
  
  </style>
</head>
<body>
<div class="box">
  <ul>
    <li><a href="#"><img src="images/01.jpg"></a></li>
    <li><a href="#"><img src="images/02.jpg"></a></li>
    <li><a href="#"><img src="images/03.jpg"></a></li>
    <li><a href="#"><img src="images/04.jpg"></a></li>
    <li><a href="#"><img src="images/05.jpg"></a></li>
    <li><a href="#"><img src="images/06.jpg"></a></li>
  </ul>
</div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
  $(function()
    $("li").mouseenter(function()
      $(this).css("opacity","1").siblings().css("opacity","0.4");
    );
    $("li").mouseleave(function()
      $("li").css("opacity","1");
    );
  );
</script>
</body>
</html>

以上是关于鼠标悬停高亮当前图片的主要内容，如果未能解决你的问题，请参考以下文章