jQuery：将鼠标单元保持打开状态，同时将鼠标悬停在子菜单项上

Question

这已被问到很多。但我似乎无法找到有效的解决方案。我有一个jQuery代码，可以在悬停时打开我的子菜单，但在我尝试查看子菜单项后它会消失。我该如何解决这个问题？

这是我的代码：

$('.hover').hover(
  function() {
    $('.drop-box').show();
  },
  function() {
    $('.drop-box').hide();
  })
});

.drop-box {
    position: absolute;
    width: 100%;
    height: 60px;
    background: darkgreen;
    top: 60px;
    left: 0;
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover">hover</div>
  <div class="drop-box">
    <div class="container row">
      <div class="col-md-4">
        <p class="mb-0">Text</p>
      </div>
      <div class="col-md-4">
        <p class="mb-0">Text</p>
      </div>
      <div class="col-md-4">
        <p class="mb-0">Text</p>
      </div>
    </div>
  </div>
</div>

Answer 1

只需将.drop-box及其所有内容放在.hover内即可。 另外，您需要删除top属性，以防止文本与.drop-box之间存在差距。

＆＃13;

＆＃13;

$('.hover').hover(
                function () {
                    $('.drop-box').show();
                },
                function () {
                    $('.drop-box').hide();
                }
            );

＆＃13;

.drop-box {
    position: absolute;
    width: 100%;
    height: 60px;
    background: darkgreen;
    // top: 60px;
    left: 0;
    display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover">hover<div class="drop-box">
    <div class="container row">
      <div class="col-md-4">
        <p class="mb-0">Text</p>
      </div>
      <div class="col-md-4">
        <p class="mb-0">Text</p>
      </div>
      <div class="col-md-4">
        <p class="mb-0">Text</p>
      </div>
    </div>
   </div>
  </div>
  

＆＃13;

＆＃13;

＆＃13;

<强>更新

如果您无法将.drop-box移动到.hover，则可以使用div包装所有内容并使用CSS添加悬停事件：

＆＃13;

＆＃13;

.drop-box {
  position: absolute;
  width: 100%;
  height: 60px;
  background: darkgreen;
  // top: 60px;
  left: 0;
  display: none;
}

.everything:hover .drop-box {
  display: block;
}

＆＃13;

<div class="everything">
  <div class="hover">hover</div>
  <div class="drop-box">
    <div class="container row">
      <div class="col-md-4">
        <p class="mb-0">Text</p>
      </div>
      <div class="col-md-4">
        <p class="mb-0">Text</p>
      </div>
      <div class="col-md-4">
        <p class="mb-0">Text</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;