JQuery/CSS - Hover анимация со ссылками

У меня есть следующий JQuery код:JQuery/CSS - Hover анимация со ссылками

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

В принципе, если вы наведите курсор мыши на круг, анимация работает, как я ожидаю, тоже, если я наводил курсор на кнопку в круге, анимация запускает функцию «mouseleave».

Если я добавлю кнопку pointer-events: none; к кнопке, она работает правильно, но, очевидно, это остановит событие наведения на кнопке и ссылку на внешний URL.

Как предотвратить событие наведения на кнопку, чтобы не запускать событие «mouseleave»?

источник

2016-06-06 nsilva

Я думаю, что одним из возможных решений будет добавление pointer-events: none; и добавление опции onclick для кнопки.

Другим вариантом будет использовать MouseOut InstEd из MouseLeave: https://api.jquery.com/mouseout/

источник

2016-06-06 13:03:17

Я пробовал mouseout, но это сработало так же, как мышь. Если я добавляю указатели-события: none; на кнопку он не запускает ничего, добавляя функцию зависания на кнопку. Не думайте, что вы могли бы создать jsfiddle? – nsilva

Вы можете выбрать родителя всех элементов, так что это не имеет значения, где вы парить.

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

Я изменил некоторые мелкие вещи в коде, но получил его на работу здесь: Fiddle

источник

2016-06-06 13:10:54 Atticweb

Это отлично работает, но на самом деле у меня есть 3 круга в живом примере, поэтому с помощью # efficiency-circle для события mouseenter запускаются все три анимации – nsilva

Просто переместите button/span внутри круга, и его следует решить вашу проблему из коробки, (, что каламбур был совершенно не намерен). Так как в HTML/CSShover над ребенком переводит также зависание над родителем. В HTML/CSS нет понятия блокировки наведения.

Итак, вы можете сделать something along these lines (Примечание: не мое самое гордое творение, но должно дать вам дрейф; D).

источник

2016-06-06 13:11:10

JQuery/CSS - Hover анимация со ссылками

ответ

Смежные вопросы