javascript - 在鼠标悬停 时显示 Div 但如果鼠标悬停在另一个 li 上则隐藏 div 并显示正确

Question

我正在尝试与你们一起完成我正在构建的这个大型菜单，
在另一个问题中，当鼠标悬停在 <li> 上时，我得到了帮助显示和隐藏一个 div。 : 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

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

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