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

I have the following jQuery code:

我有以下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>

SEE JSFIDDLE

Basically if you hover over the circle, the animation works as I expect it too, if I hover over the button within the circle, the animation triggers the 'mouseleave' function.

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

If I add pointer-events: none; to the button, it works properly but obviously this stops the hover event on the button and the link to an external URL.

如果我添加指针事件:无;按钮,它工作正常,但显然这会停止按钮上的悬停事件和外部URL的链接。

How can I prevent the hover event on the button to not trigger the 'mouseleave' event?

如何防止按钮上的悬停事件不触发'mouseleave'事件?

3 个解决方案

#1

Just move the button/span inside the Circle, and its should solve your problem out of the box, (that pun was totally un-intentded). Since in HTML/CSS an hover over a child translates to hover over the parent too. There is no concept of hover blocking in HTML/CSS.

只需移动圆圈内的按钮/跨度,它就可以解决你的问题,(双关语完全没有意图)。因为在HTML / CSS中,将鼠标悬停在子项上也会将鼠标悬停在父项上。 HTML / CSS中没有悬停阻止的概念。

So you can do something along these lines (Note: Not my proudest creation, but should give you a drift ;D ).

所以你可以沿着这些方向做一些事情(注意:不是我自豪的创作,但应该给你漂移; D)。

#2

You could select the parent of all the elements, so it does not matter where you hover.

您可以选择所有元素的父元素,因此悬停的位置无关紧要。

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();
    }
  });
});

I changed some small things in the code but got it to work here: Fiddle

我在代码中改变了一些小东西但是让它在这里工作:小提琴

#3

I think one possible solution would be adding pointer-events: none; and adding an onclick option for the button.

我认为一个可能的解决方案是添加指针事件:无;并为按钮添加onclick选项。

Another option would be using mouseout insted of mouseleave: https://api.jquery.com/mouseout/

另一种选择是使用mouseleave的mouseout:https://api.jquery.com/mouseout/

#1