使用 <li> 悬停的 Javascript 图像

Question

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

$(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>

非常感谢您的 cmets。

Answer 1

将mouseover 更改为mouseenter 并将mouseout 更改为mouseleave，以便将鼠标移到子项上不会导致重新触发事件。

Answer 2

如果我理解正确，您希望它在您将鼠标悬停在带有文本“Redpoppy Stories”的 div 上时淡入，而不是当您将鼠标悬停在带有文本“Blog”、“Facebook”和“Instagram”的列表项上时。

首先在您的第二个菜单组中，您在列表项上使用 id='pau' 而不是保存文本的 div。另外我会使用 jquery hover() 方法而不是 mouseover 和 mouseout。悬停方法接受参数。第一个是悬停开始时运行的函数。第二个是悬停结束时运行的函数。

$(document).ready(function() {
    $("#pau").hover(function(){ 
        $("#paup").fadeIn(600); 
    } , function(){
        $("#paup").fadeOut(600);
    });

    $("#red").hover(function(){
        $("#redp").fadeIn(600);
    }, function(){
        $("#redp").fadeOut(600);
    });
});

看到这个小提琴：http://jsfiddle.net/0o724b6b/