如何在鼠标悬停时显示 div 元素？

Question

我需要在悬停列表元素时显示 div，有点像下拉菜单。

我已经有办法用 jQuery 做到这一点，这就是我想要的，但问题是当我将鼠标移离列表（li 元素）时，div 消失。我希望能够将鼠标从列表元素移动到 div 并能够与 div.

中的元素进行交互

这可以通过点击功能解决，但我不想使用点击功能，因为 div 上的元素将包含锚链接，点击时会将用户带到页面下方，因此您可以看到如何显示并保留 div 的点击功能不是一个好主意，除非我能找到一种方法在单击其内容（锚链接）时关闭 div。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  .nav-item-dropdown {
    position: absolute;
    /* other styles ... */
  }
</style>

<div class="nav-wrap">
  <ul>
    <li id="nav-item1" class="nav-item-wrap">Services</li>
    <li id="nav-item2" class="nav-item-wrap">Projects</li>
  </ul>
</div>

<div class="nav-item-dropdown nav-item1-dropdown">
  <!-- Drop-down nav contents for services (title and image) wrapped by anchor link goes here -->
</div>

<script>
  $(document).ready(function() {
    jQuery('#nav-item1').hover(function() {
      $('.nav-item1-dropdown').toggle();
    });
    jQuery('#nav-item2').hover(function() {
      $('.nav-item2-dropdown').toggle();
    });
  });
</script>

我希望能够将鼠标从列表元素 (.nav-item-wrap) 移动到 div (.nav-item-dropdown) 并能够与 div。当我将鼠标移离触发它的列表元素时，我不希望 div 消失。

Answer 1

试试这个：

 $(document).ready(function(){
      jQuery('#nav-item1').mouseover(function() {
         $('.nav-item1-dropdown').show();
      }); 
      jQuery('#nav-item2').mouseover(function() {
         $('.nav-item2-dropdown').show();
      });
   });

Answer 2

我想你可以使用类似这样的东西来显示和隐藏 div

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="nav-wrap">
  <ul>
    <li id="nav-item1" class="nav-item-wrap">Services</li>
    <li id="nav-item2" class="nav-item-wrap">Projects</li>
  </ul>
</div>

<div class="nav-item-dropdown nav-item1-dropdown" style="display:none">
  <p>your action goes here</p>
</div>

<script>
  $(document).ready(function() {
    jQuery('.nav-wrap').hover(function() {
      $('.nav-item1-dropdown').show();
    });
    $('.nav-item1-dropdown').hide(); //use it wherever you need to hide it
  });
</script>

Answer 3

.toggle() 方法简单地切换元素的可见性。在您的代码中，它们做得很好。在您的情况下，不要切换使用 .show() 和 .hide()，如下所示。加载时需要额外的 class 来隐藏 div。

$(document).ready(function() {
  jQuery('#nav-item1').hover(function() {
    $('.nav-item1-dropdown').show();
    $('.nav-item2-dropdown').hide();
  });
  jQuery('#nav-item2').hover(function() {
    $('.nav-item2-dropdown').show();
    $('.nav-item1-dropdown').hide();
  });
});

.nav-item-dropdown {
  position: absolute;
  /* other styles ... */
}

.yourClass {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-wrap">
  <ul>
    <li id="nav-item1" class="nav-item-wrap">Services</li>
    <li id="nav-item2" class="nav-item-wrap">Projects</li>
  </ul>
</div>

<div class="nav-item-dropdown nav-item1-dropdown yourClass">
  div1
  <!-- Drop-down nav contents for services (title and image) wrapped by anchor link goes here -->
</div>
<div class="nav-item-dropdown nav-item2-dropdown yourClass">
  div2
  <!-- Drop-down nav contents for services (title and image) wrapped by anchor link goes here -->
</div>

如何在鼠标悬停时显示 div 元素？

How to show a div element on mouse hover?

javascript

jquery

jquery-hover