Javascript 鼠标悬停在 <li> 上的图像

Question

我的菜单包含不同的名称，每次用户将鼠标悬停在 <li> 元素之一上时，我都试图淡出 in/out 不同的图像。每个 <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>

非常感谢您的意见。

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);
    });
});

看到这个fiddle：http://jsfiddle.net/0o724b6b/

Javascript 鼠标悬停在 <li> 上的图像

Javascript image on hover with <li>

html

javascript

css

jquery

fadein