悬停在 上的 Javascript 图片

Question

我的菜单包含不同的名称，每次用户将鼠标悬停在 <li> 之一上时，我都会尝试淡入/淡出不同的图像。元素。每个<li>元素连接到不同的 id，以便为特定的人淡入正确的图像。问题是淡入和淡出适用于所有 <ul>具体<li>下的元素元素。您知道我该如何解决这个问题吗？

$(document).ready(function() {
  $("#pau").mouseover(function() {
    $("#paup").fadeIn(600);
  });
  $("#pau").mouseout(function() {
    $("#paup").fadeOut(600);
  });
  $("#red").mouseover(function() {
    $("#redp").fadeIn(600);
  });
  $("#red").mouseout(function() {
    $("#redp").fadeOut(600);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='people'>
  <nav>
    <ul>
      <li>
        <div id="red">Redpoppy Stories</div>
        <ul>
          <li><a href="http://www.redpoppystories.com" target="_blank">Blog</a></li>
          <li><a href="https://www.facebook.com/redpoppystories" target="_blank">Facebook</a></li>
          <li><a href="https://instagram.com/redpoppyzuz/" target="_blank">Instagram</a></li>
          <li><a href="#">Vimeo</a></li>
        </ul>
      </li>
    </ul>
    <ul>
      <li id="pau">
        <div>Paulinemma</div>
        <ul>
          <li><a href="http://www.diamondandunicorn.com" target="_blank">Blog</a></li>
          <li><a href="https://www.facebook.com/paulinemma" target="_blank">Facebook</a></li>
          <li><a href="https://instagram.com/paulinemma/" target="_blank">Instagram</a></li>
          <li><a href="#">Vimeo</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

非常感谢您的意见。

Answer 1

将 mouseover 更改为 mouseenter 并将 mouseout 更改为 mouseleave 因此将鼠标移到子项上不会导致要重新触发的事件。