javascript - 悬停时显示div

Question

我试图在将鼠标悬停在 a 标记上时显示 div 。我还希望当鼠标移到显示的 div 上时 div 不会消失。虽然我希望 div 在您没有将鼠标悬停在 a 标记文本或 div 本身上时消失。

这专门用于导航栏，当悬停在其中一个选项卡上时，它可以显示内容。

我尝试过使用 .div-name + .div-name2 {} 方法，但是由于我在这两个 div 之间有内容，所以这个解决方案不起作用.

如果有更好的方法，例如通过某种 Bootstrap 机制，知道这一点会很棒，而且我确信我使用 javascript 和 jquery 使它过于复杂。否则将不胜感激帮助我使用 javascript/jquery。

$(".hover-btn").mouseenter(function() {
  $(".hover-btn-section").stop().fadeIn(500);
});

$(".hover-btn").mouseleave(function() {
  $(".hover-btn-section").stop().delay(500).fadeOut(500);
});

$(".hover-btn-section").mouseenter(function() {
  $(".hover-btn-section").stop();
});

.hover-btn {
  border: 1px solid red;
}

.hover-btn-section {
  display: none;
  width: 100%;
  border: 1px solid green;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class='hover-btn'>hover-btn</a>
<a href="#" class='link2'>link2</a>

<div class="hover-btn-section">
  <p>Testing Area</p>
</div>

Answer 1

您所描述的只能使用 CSS 来实现。而不是相邻的兄弟选择器 + 使用兄弟选择器 ~:

.hover-btn {
  border: 1px solid red;
}

.hover-btn:hover ~ .hover-btn-section {
  opacity: 1;
  pointer-events: all;
}

.hover-btn-section {
  opacity: 0;
  width: 100%;
  border: 1px solid green;
  background-color: yellow;
  pointer-events: none;
  transition: opacity .3s ease-in-out;
}

.hover-btn-section:hover {
  opacity: 1;
  pointer-events: all;
}

<a href="#" class="hover-btn">hover-btn</a>
<a href="#" class="link2">link2</a>

<div class="hover-btn-section">
  <p>Testing Area</p>
</div>