jQuery/CSS-带链接的悬停动画

我有以下jQuery代码：

jQuery('#efficiency-circles .circle').on('mouseenter mouseleave', function(e) {
  if (e.type === "mouseenter") {
    jQuery('h1', this).animate({
      padding: "44px 0 0px 0px",
    }, {
      duration: 300,
      queue: false
    });
    jQuery(this).next().fadeIn();
    jQuery(this).parent().find('.btn').fadeIn();
  } else if (e.type === "mouseleave") {
    jQuery('h1', this).animate({
      padding: "124px 0",
    }, {
      duration: 300,
      queue: false
    });
    jQuery(this).next().fadeOut();
    jQuery(this).parent().find('.btn').fadeOut();
  }
});

HTML

<div id="efficiency-circles">

  <span id="top-arrow"></span>
  <span class="circle animated first-pulse full-visible pulse"><h1 style="padding: 124px 0px;">Reduce<br>costs</h1></span>
  <p class="txt-circle-reveal animated">Gain the competitive edge and never miss a sales opportunity.</p>
  <span id="btn-shed" class="btn btn-circle animated">Shed costs</span>

</div>

降低成本
获得竞争优势，决不错过销售机会
棚费

基本上，如果你将鼠标悬停在圆圈上，动画也会像我预期的那样工作。如果我将鼠标悬停在圆圈内的按钮上，动画会触发“mouseleave”功能

如果我添加

指针事件：无
如何防止按钮上的悬停事件不触发“mouseleave”事件？
我认为一种可能的解决方案是添加
指针事件：无
并为按钮添加onclick选项

另一种选择是使用mouseout代替mouseleave:
我认为一种可能的解决方案是添加
指针事件：无
并为按钮添加onclick选项

另一个选项是使用mouseout而不是mouseleave:
您可以选择所有元素的父元素，因此将鼠标悬停在何处并不重要

jQuery(document).ready(function($) {
  jQuery('#efficiency-circles').on('mouseenter mouseleave', function(e) {
    if (e.type === "mouseenter") {
      jQuery('h1', this).animate({
        padding: "44px 0 0px 0px",
      }, {
        duration: 300,
        queue: false
      });
      jQuery('.txt-circle-reveal', this).fadeIn();
      jQuery(this).parent().find('.btn').fadeIn();
    } else if (e.type === "mouseleave") {
      jQuery('h1', this).animate({
        padding: "124px 0",
      }, {
        duration: 300,
        queue: false
      });
      jQuery('.txt-circle-reveal', this).fadeOut();
      jQuery(this).parent().find('.btn').fadeOut();
    }
  });
});

我在代码中做了一些小改动，但在这里成功了：
您可以选择所有元素的父元素，因此无论您将鼠标悬停在何处

jQuery(document).ready(function($) {
  jQuery('#efficiency-circles').on('mouseenter mouseleave', function(e) {
    if (e.type === "mouseenter") {
      jQuery('h1', this).animate({
        padding: "44px 0 0px 0px",
      }, {
        duration: 300,
        queue: false
      });
      jQuery('.txt-circle-reveal', this).fadeIn();
      jQuery(this).parent().find('.btn').fadeIn();
    } else if (e.type === "mouseleave") {
      jQuery('h1', this).animate({
        padding: "124px 0",
      }, {
        duration: 300,
        queue: false
      });
      jQuery('.txt-circle-reveal', this).fadeOut();
      jQuery(this).parent().find('.btn').fadeOut();
    }
  });
});

我更改了代码中的一些小东西，但它在这里起作用：
只要将
按钮/span
移动到圆圈内，它就可以解决您的问题开箱即用的，（这个双关语完全没有意图）。因为在
HTML/CSS
中，将
鼠标悬停在子对象上也会转换为鼠标悬停在父对象上。在
HTML/CSS
中没有悬停阻止的概念

所以你可以这样做（注意：这不是我最自豪的创作，但应该给你一个提示；D）。
只要把
按钮/span
移到圆圈内，它就可以解决你的问题开箱即用（这个双关语完全没有意图）。因为在
HTML/CSS
中，将
鼠标悬停在子对象上也会转换为鼠标悬停在父对象上。在
HTML/CSS
中没有悬停阻止的概念

所以你可以这样做（注意：这不是我最自豪的创作，但应该给你一个提示；D）。
我尝试了mouseout，但效果与mouseleave相同。如果我添加指针事件：无；对于按钮，它不会通过在按钮上添加悬停功能触发任何内容。难道你不能创建一个JSFIDLE吗？我尝试了mouseout，但它的工作原理与mouseleave相同。如果我添加指针事件：无；对于按钮，它不会通过在按钮上添加悬停功能触发任何内容。难道你不认为你可以创建一个JSFIDLE吗？这很好，但我在实际示例中有3个圆，所以使用#效率圆是为了mouseenter事件触发器所有3个都要动画这很好，但我在实际示例中有3个圆，所以使用#效率圆是为了mouseenter事件触发器所有3个都要动画