在悬停 <a> 下一个 div 淡入和鼠标离开 div 这个 div 淡出

【问题标题】：On hover <a> next div fadein and mouseleave on div this div fade out在悬停 <a> 下一个 div 淡入和鼠标离开 div 这个 div 淡出
【发布时间】：2018-07-26 18:22:08
【问题描述】：

在<a> 悬停时，下一个 div 淡入和 mouseleave 在 div 上这个 div 淡出，但是当 div 淡入并拖动我的鼠标潜水时它会淡出

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>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

要解决这个问题，您可以修改 HTML 以将事件挂钩到包含元素。或者，您可以使用 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>

【讨论】：