如何在鼠标悬停时显示 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

.toggle()方法只是切换元素的可见性。在您的代码中，它们很好地完成了它们的用途。在你的情况下，而不是切换使用.show()和 .hide()如下所示。加载时需要额外class隐藏div。$(document).ready(function() {&nbsp; jQuery('#nav-item1').hover(function() {&nbsp; &nbsp; $('.nav-item1-dropdown').show();&nbsp; &nbsp; $('.nav-item2-dropdown').hide();&nbsp; });&nbsp; jQuery('#nav-item2').hover(function() {&nbsp; &nbsp; $('.nav-item2-dropdown').show();&nbsp; &nbsp; $('.nav-item1-dropdown').hide();&nbsp; });});.nav-item-dropdown {&nbsp; position: absolute;&nbsp; /* other styles ... */}.yourClass {&nbsp; display: none}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="nav-wrap">&nbsp; <ul>&nbsp; &nbsp; <li id="nav-item1" class="nav-item-wrap">Services</li>&nbsp; &nbsp; <li id="nav-item2" class="nav-item-wrap">Projects</li>&nbsp; </ul></div><div class="nav-item-dropdown nav-item1-dropdown yourClass">&nbsp; div1&nbsp; <!-- 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">&nbsp; div2&nbsp; <!-- Drop-down nav contents for services (title and image) wrapped by anchor link goes here --></div>

Answer 2

试试这个：&nbsp;$(document).ready(function(){&nbsp; &nbsp; &nbsp; jQuery('#nav-item1').mouseover(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$('.nav-item1-dropdown').show();&nbsp; &nbsp; &nbsp; });&nbsp;&nbsp; &nbsp; &nbsp; jQuery('#nav-item2').mouseover(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$('.nav-item2-dropdown').show();&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp;});

Answer 3

我认为你可以使用这样的东西来显示和隐藏 div<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><div class="nav-wrap">&nbsp; <ul>&nbsp; &nbsp; <li id="nav-item1" class="nav-item-wrap">Services</li>&nbsp; &nbsp; <li id="nav-item2" class="nav-item-wrap">Projects</li>&nbsp; </ul></div><div class="nav-item-dropdown nav-item1-dropdown" style="display:none">&nbsp; <p>your action goes here</p></div><script>&nbsp; $(document).ready(function() {&nbsp; &nbsp; jQuery('.nav-wrap').hover(function() {&nbsp; &nbsp; &nbsp; $('.nav-item1-dropdown').show();&nbsp; &nbsp; });&nbsp; &nbsp; $('.nav-item1-dropdown').hide(); //use it wherever you need to hide it&nbsp; });</script>