Question

我正试着和你们一起完成我正在建造的这个大型菜单在另一个问题中，我帮助显示并隐藏了一个div，同时鼠标悬停在<li>上：List items show / hide different and separate div with jQuery
我想要实现的是，当我将鼠标悬停在一个li元素上时，我想显示一个与之相关的div，但是当我鼠标悬停时它必须留在那里（所以用户可以导航到它），而如果我将鼠标悬停在另一个上li元素它隐藏了前一个并显示了它的相关div 我正在使用的jQuery：

$('#menu-left li').hover(
  function() {
    $("#" + $(this).data("menu")).show();
  },
  function() {
    $("#" + $(this).data("menu")).hide();
  }
);

HTML：

<div class="cbi-main-menu">
    <div class="row">
        <div class="col-md-3">
            <div class="cbi-menu-sidebar">
              <h3 class="menu-item-prime">Menu</h3>
        <ul id="menu-left" class="no-style">
          <li data-menu="item-1"><a id="lnk1" href="#" class="menu-item-1" >Link 1</a></li>
                <li data-menu="item-2"><a id="lnk2" href="#" class="menu-item-2">Link 2</a></li>
                <li data-menu="item-3"><a id="lnk3" href="#" class="menu-item-3">Link 3</a></li>
          <li data-menu="item-4"><a id="lnk4" href="#" class="menu-item-4">Link 4</a></li>
          <li data-menu="item-5"><a id="lnk5" href="#" class="menu-item-5">Link 5</a></li>
          <li data-menu="item-6"><a id="lnk6" href="#" class="menu-item-6">Link 6</a></li>
          <li data-menu="item-7"><a id="lnk7" href="#" class="menu-item-7">Link 7</a></li>
          <li data-menu="item-8"><a id="lnk8" href="#" class="menu-item-8">Link 8</a></li>
          <li data-menu="item-9"><a id="lnk9" href="#" class="menu-item-9">Link 9</a></li>
          <li data-menu="item-10"><a id="lnk10" href="#" class="menu-item-10">Link 10</a></li>
          </ul>
            </div>
        </div>
        <div class="col-md-9">
            <div class="link-show container-menu" id="item-1">
        <img src="http://via.placeholder.com/350x150" id="item-1">Link1
      </div>
            <div class="link-show container-menu" id="item-2">
        <img src="http://via.placeholder.com/350x150" id="item-2">Link2
      </div>
            <div class="link-show container-menu" id="item-3">
        <img src="http://via.placeholder.com/350x150" id="item-3">Link3
      </div>
      <div class="link-show container-menu" id="item-4">
        <img src="http://via.placeholder.com/350x150" id="item-4">Link4
      </div>
            <div class="link-show container-menu" id="item-5">
        <img src="http://via.placeholder.com/350x150" id="item-5">Link5
      </div>
            <div class="link-show container-menu" id="item-6">
        <img src="http://via.placeholder.com/350x150" id="item-6">Link6
      </div>
      <div class="link-show container-menu" id="item-7">
        <img src="http://via.placeholder.com/350x150" id="item-7">Link7
      </div>
            <div class="link-show container-menu" id="item-8">
        <img src="http://via.placeholder.com/350x150" id="item-8">Link8
      </div>
            <div class="link-show container-menu" id="item-9">
        <img src="http://via.placeholder.com/350x150" id="item-9">Link9
      </div>
      <div class="link-show container-menu" id="item-10">
        <img src="http://via.placeholder.com/350x150" id="item-10">Link10
      </div>
        </div>
    </div>
</div>

Answer 1

这是你想要的吗？而是将函数绑定到悬停事件，您需要将其绑定到鼠标悬停事件，因此如果您将鼠标移出“li”，内容将不会消失，但只有在您输入另一个“li”时才会更改。

$('#menu-left li').on("mouseover", function() {
     $("#" + $(this).data("menu")).show();
     $("#" + $(this).data("menu")).siblings().hide();
});

Answer 2

您的代码中有一个小问题。当使用jQuery选择器$（“＃menu-left li”）时，你不应该忘记在这里你试图通过单个调用选择多个DOM li元素。因此，您必须循环遍历它们才能将所需效果应用于它们中的每一个。如果理解这一点，则工作代码应如下所示：

$('#menu-left li').each(function(i,e){
    $(e).hover(
      function() {
        $("#" + $(this).data("menu")).show();
      },
      function() {
        $("#" + $(this).data("menu")).hide();
      }
   );
});

另外，不要忘记默认情况下将div元素的'display'CSS属性预先设置为'none'。

在鼠标悬停<li>显示Div但是如果鼠标悬停另一个li隐藏div并显示正确

2 个答案: