仅为菜单图标添加hover动画失败问题求助

Got it, let's fix this so your menu icons only animate when you hover directly over them, not the whole list item. Here's what's going wrong and how to fix it:

The Issue with Your Current Code #

Right now you're attaching the hover event to the .nav-item container—so any mouse movement over the entire list item (including the text like "Dashboard") triggers the animation. Also, using toggleClass with the shorthand hover() can cause unexpected behavior because it runs on both mouseenter and mouseleave, which might toggle the class multiple times if you hover quickly.

The Fix #

Instead of listening to the parent .nav-item, attach the hover event directly to the menu icons (the img elements). We'll explicitly handle mouseenter to add the animation class, and mouseleave to remove it after the animation completes—this keeps the behavior consistent.

Updated JavaScript Code #

// Animate menu icons ONLY when hovering the image itself
$('.nav-item img').hover(
  function() {
    // Mouse enter: add animation classes
    $(this).addClass('animated swing');
  },
  function() {
    // Mouse leave: remove classes after animation finishes (matches swing's ~1s duration)
    setTimeout(() => {
      $(this).removeClass('animated swing');
    }, 1000);
  }
);

Full Working Example #

Here's the complete integrated code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="dashboard">
      <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
      <span class="menu-title">Dashboard</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="general-setup" onclick="gitLabFetch()" id="createEnviromentTab">
      <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
      <span class="menu-title">Create Environment</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="collapse" href="#docker-pages" aria-expanded="false" aria-controls="testing-pages">
      <img src="../resources/img/icons/docker-icon.png" alt="">
      <span class="menu-title">Docker <i class="fa fa-sort-down"></i></span>
    </a>
    <div class="collapse" id="docker-pages">
      <ul class="nav flex-column sub-menu">
        <li class="nav-item">
          <a class="nav-link" href="docker-status">
            <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
            <span class="menu-title">Container Status</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="container-creation">
            <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
            <span class="menu-title">Container Creation</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="docker-logs">
            <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
            <span class="menu-title">Container Logs</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="docker-console">
            <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
            <span class="menu-title">Container Console</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="docker-images">
            <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
            <span class="menu-title">Images</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="docker-volumes">
            <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
            <span class="menu-title">Volumes</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="docker-info">
            <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
            <span class="menu-title">Information</span>
          </a>
        </li>
      </ul>
    </div>
  </li>
</ul>

<script>
$('.nav-item img').hover(
  function() {
    $(this).addClass('animated swing');
  },
  function() {
    setTimeout(() => {
      $(this).removeClass('animated swing');
    }, 1000);
  }
);
</script>

Why This Works #

• We target $('.nav-item img') directly, so the hover event only fires when the mouse is over the icon image (not the text or other parts of the list item).
• Using the two-function syntax for hover() lets us explicitly control adding the animation class on mouse enter, and removing it after the animation finishes (the 1000ms timeout matches the default duration of the swing animation in animate.css).
• This avoids the unpredictable class toggling that can happen with toggleClass on hover, ensuring the animation plays correctly every time.

内容的提问来源于stack exchange，提问作者user9288338