当我快速鼠标时,jQuery悬停卡住了
Posted
技术标签:
【中文标题】当我快速鼠标时,jQuery悬停卡住了【英文标题】:jQuery hover gets stuck when I mouse quickly 【发布时间】:2012-04-18 13:09:05 【问题描述】:我有一个显示“订阅”的按钮,当用户将鼠标悬停在它上面时,我想用另一个显示“取消订阅”的按钮替换它。
(有点像 Twitter 的关注按钮,如果你悬停,它会变成取消关注。)
这是我到目前为止所得到的。
$(document).ready(function()
$('#subscribed_button').hover(function()
$('#subscribed_button').css("display","none");
$('#unsubscribe_button').css("display","inline");
,function()
);
$('#unsubscribe_button').hover(function()
,function()
$('#unsubscribe_button').css("display","none");
$('#subscribed_button').css("display","inline");
);
);
一切都很好,除了当我快速鼠标时,在这种情况下似乎检测到“悬停”,但没有检测到“悬停”。所以我的按钮偶尔会卡在“取消订阅”中……这很奇怪,而且在视觉上会分散注意力。
我在 *** 上看到的大多数解决方案都与停止动画有关,但在这种情况下,我没有制作任何动画;这是一个简单的显示开/关。
有什么想法吗?
【问题讨论】:
你能提交一个活生生的例子吗? 在 CSS 中实际上有一个叫做 :hover 的东西,代码中有很多函数吗? @Jorge,当代码不起作用时,我很犹豫是否将代码推送到 WWW。 @adeneo 我通常会使用 :hover 进行样式设置,但在这种情况下,我实际上是在更改按钮的文本,而且我想不出在没有纯 CSS 的情况下做到这一点的方法在某处涉及 javascript。 【参考方案1】:没有看到它的实际效果,我假设这是因为您显示/隐藏了 2 个不同的 html 元素。当您快速将鼠标悬停时,可能是非活动元素尚未激活,等等等等,从而导致问题。
为了获得更好的稳定性和性能,我建议如下:
您的订阅/取消订阅仅使用一个 html 元素,而不是显示/隐藏 2 个元素,只需更改按钮的文本和/或通过更改 css 类等替换背景图像。甚至更好如果使用图像背景将使用包含两种状态的单个背景图像,并根据当前状态更新背景位置。
以上只是一个概念,因为您尚未发布整个代码,因此无法针对上述进行修改。
【讨论】:
谢谢,成功了! @binarious 给了我一个很好的 sn-p。谢谢你们。【参考方案2】:我只会使用一个元素:
$(function()
var $sub = $('#subscribe_button');
$sub.hover(function()
$sub.text('Unsubscribe');
, function()
$sub.text('Subscribe');
);
);
【讨论】:
谢谢! @KP。给了我理论,你给了我实践。效果很好。【参考方案3】:在 jQuery 中有称为 mouseenter 和 mouseleave 的方法。 http://api.jquery.com/mouseenter/ 如果您使用它们,它将有助于正确冒泡并解决您的问题。
【讨论】:
以为可以做到,但遗憾的是没有骰子。 你能发一个mouseenter and leave in use的例子吗?以上是关于当我快速鼠标时,jQuery悬停卡住了的主要内容,如果未能解决你的问题,请参考以下文章
Bootstrap 4工具提示使用Datatables.net卡住了