Question

On hover of an <a> the next div fadein and mouseleave on div this div fade out but when div fade in and drag my mouse on dive it will go fade out

jQuery('.share_link').hover(function(event) {
  event.stopPropagation();
  jQuery(this).next('.quick-view-share').stop().fadeIn();
}, function(event) {
  event.stopPropagation();
  jQuery(this).next('.quick-view-share').not().fadeOut();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a target="_blank" href="javascript:void(0);" class="share_link"></a>
<div class="quick-view-share" style="display: none;">
  <a class="facebook" href="#" title="Share on Facebook">  Face Book</a>
  <a class="twitter" href="#" title="Tweet"> Twittter</a>
  <a class="google-plus" href="#" title="Share on Google Plus"> G Plus </a>
</div>

Answer 1

问题是因为hover逻辑附加到a元素。因此，一旦离开a从显示的div中选择某项，它就会立即消失。

要解决此问题，您可以修改HTML，以将事件挂钩到包含元素。另外，您可以利用CSS的相邻兄弟运算符+使CSS的悬停逻辑对这两个元素都起作用：

a.share_link + .quick-view-share {
  position: absolute;
  opacity: 0;
  transition: opacity 0.4s;
}

a.share_link:hover + .quick-view-share, 
a.share_link + .quick-view-share:hover {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a target="_blank" href="#" class="share_link">Share</a>
<div class="quick-view-share">
  <a class="facebook" href="#" title="Share on Facebook">  Face Book</a>
  <a class="twitter" href="#" title="Tweet"> Twittter</a>
  <a class="google-plus" href="#" title="Share on Google Plus"> G Plus </a>
</div>

在悬停时<a> next div fadein and mouseleave on div this div fade out

1 个答案: