Как показать элемент div при наведении мыши?

Question

Мне нужно показать div при наведении на элемент списка, вроде выпадающего меню.

У меня уже есть способ сделать это с помощью jQuery, что мне и нужно,но проблема в том, что когда я убираю мышь из списка (элемент li), div исчезает. Я хочу иметь возможность перемещать мышь из элемента списка в div и взаимодействовать с элементами внутри div.

Это можно решить с помощью функции щелчка, но я не хочу использоватьclick, потому что элементы в 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() {
  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>

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

Попробуйте это:

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