Question

当我将鼠标悬停在div标记上时，我试图显示a。我也希望当鼠标移到显示的div上时div不消失。尽管当您不将鼠标悬停在div标签文本或a本身上时，我希望div消失。

这专门用于导航栏，当其悬停在tabs之一上时可以显示内容。

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

如果有更好的方法，例如通过某种引导机制，这将是一件很不错的事情，并且我确信我使用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>

悬停时显示div

1 个答案: