Блог

Главная - Вопросы по программированию - Скрыть активный div при наведении курсора мыши на следующий элемент

Скрыть активный div при наведении курсора мыши на следующий элемент

#javascript #jquery

#javascript #jquery

Вопрос:

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

https://codepen.io/codepat007/pen/BazYXKo

Мой код

 $(".tooltipsShow").click(function() {
  $(".tooltips").show();
});


$(".tooltipsShow").hover(function() {
    $(this).nextAll().eq(0).find(".tooltipsText").parent(".tooltips").hide();
});  
 .tooltips {
  display: none;
  padding: 10px;
  position:absolute; 
  top: 10%;
  left: 30%;
  background: green;
  color:#fff;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tooltipsShow">
  <p>Some text 1</p>
</div>
<div class="tooltipsShow">
  <p>Some text 2</p>
</div>
<div class="tooltipsShow">
  <p>Some text 3</p>
</div>
<div class="tooltipsShow">
  <p>Some text 4</p>
</div>

<div class="tooltips"><p class="tooltipsText">I am tooltips</p></div>

Ответ №1:

Затем просто скройте всплывающую подсказку div при наведении курсора мыши

 $(".tooltipsShow").hover(function() {
   console.log('hover');
  $(".tooltips").hide();
});