jQuery/CSS -带有链接的Hover动画
我有以下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();
}
});<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‘函数。
如果我将pointer-events: none;添加到按钮中，它会正常工作，但显然这会停止按钮上的悬停事件和指向外部URL的链接。
如何防止按钮上的悬停事件不触发“mouseleave”事件？
回答 3
Stack Overflow用户
发布于 2016-06-06 13:10:54
您可以选择所有元素的父元素，因此在何处悬停并不重要。
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();
}
});
});我在代码中更改了一些小东西，但在这里工作：小提琴
Stack Overflow用户
发布于 2016-06-06 13:11:10
只需将button/span移动到圆圈内，它就可以解决您的问题--，，(那个双关语完全没有注意到)。因为在HTML/CSS中，子节点上的hover也会被转换为悬停在父节点上。在HTML/CSS中不存在悬停阻塞的概念。
所以你可以做沿着这条线的东西 (注意:这不是我最骄傲的作品，但应该给你一个漂移;D )。
Stack Overflow用户
发布于 2016-06-06 13:03:17
我认为一个可能的解决方案是添加pointer-events: none;并为按钮添加一个onclick选项。
另一种选择是在mouseleave中使用mouseout：https://api.jquery.com/mouseout/
https://stackoverflow.com/questions/37658097
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号