CODEWITHSUNDEEP
jquery
nsilva
nsilva

Reputation: 5622

jQuery/CSS - Hover animation with links

I have the following jQuery code:

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.

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

Upvotes: 0

Views: 62

Answers (3)

Jaapze
Jaapze

Reputation: 742

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

Upvotes: 1

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13948

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.

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

Upvotes: 1

Nico Savini
Nico Savini

Reputation: 487

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

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

Upvotes: 0

Related Questions