Jquery:如果 mouseleave = true 则执行此操作
Posted
技术标签:
【中文标题】Jquery:如果 mouseleave = true 则执行此操作【英文标题】:Jquery: if mouseleave = true then DO THIS 【发布时间】:2011-06-17 09:07:16 【问题描述】:简单的问题,我将如何在 Jquery 中完成此功能:
测试鼠标是否悬停在.myBox
if ($(".myBox").mouseleave = true)
DO SOMETHING
else something else
或
if ($(".myBox").mouseover = false)
DO SOMETHING
else Something else
注意:我正在寻找一个 IF 语句
【问题讨论】:
【参考方案1】:jQuery 提供了is
方法来检查关于jQuery 对象的条件。在您的情况下,您可以检查 :hover
CSS 伪类:
$('.myBox').is(':hover') === true
看看这个演示,尝试点击按钮(这将提醒true
),然后在按钮上切换并按回车键(没有鼠标,它将返回false
)。
演示: http://jsfiddle.net/marcuswhybrow/LL5JD/
【讨论】:
已在 Chrome 中测试,刚刚在 FF 中测试,但无法正常工作... 正在调查。 好像是jQuery的一个bug:uncaught exception: Syntax error, unrecognized expression: Syntax error, unrecognized expression: hover
你报告了这个错误吗?因为你提供的正是我想要的,gahhhh bugs!【参考方案2】:
看看jQuery Mouse Over
$(".my_box").mouseover(function()
// Mouse over...
);
$(".my_box").mouseout(function()
// Mouse left...
);
这是一个示例,当悬停在图像上时为图像添加边框,如果未重新悬停,则在 x 时间后将其移除:See it working here
var hover_off = false;
var hover_count = 1000;
$(".my_box").mouseover(function()
hover_off = false;
$(this).addClass('hovering');
);
$(".my_box").mouseout(function()
hover_off = true;
setTimeout(myMouseOut, hover_count);
);
function myMouseOut()
if (hover_off)
$(".my_box").removeClass('hovering');
【讨论】:
【参考方案3】:没错,与 jQuery 1.5.1 一起使用的 $('.myBox').is(':hover') 会引发错误,但在我的测试中仅在 Opera Browser (11.01) 中: 未捕获的异常:语法错误,无法识别的表达式:悬停
一种解决方法是使用否定表达式:$('.myBox').is('not(:hover)') 当我在 Opera 11、FF4、IE7、Chrome 5 中进行测试时,效果很好。
【讨论】:
【参考方案4】:使用 .hover() http://api.jquery.com/hover/
【讨论】:
【参考方案5】:$(".myBox").hover(
function()
//DO SOMETHING ON MOUSE ENTER
,
function()
//DO SOMETHING ON MOUSE LEAVE
);
【讨论】:
实际上这非常有用。此结构充当无法使用 if 的 else 子句,例如,当您无法(巧合地)将.hover
与 if 一起使用时,因为您在弹出登录表单中遇到 chrome 的自动完成功能。如果您使用.hover
,您肯定会遇到不希望的行为,相反,当您使用$("#foo").mouseout(function()#The Code,function());
时,您完全没有问题。谢谢。
@Luis 说得好,对于 chrome 自动填充失败,有人说将文本输入包装在 <form>
标签中会阻止它。我试过了,它有效!【参考方案6】:
这对我有用:
var hover = false;
$('.someClass').each(function(i,e)
hover = !hover ? $(e).is(':hover') : true;
);
if (hover)
// do something
else
// do something else
【讨论】:
【参考方案7】:使用这个:http://plugins.jquery.com/project/enterleave-events
$('.myBox').bind('enter leave',function()
// do something, use $(this) to get the object
);
【讨论】:
为什么要为mouseenter
和mouseleave
事件使用插件? bind('mouseenter mouseleave', ...
内部支持它们【参考方案8】:
对mouseenter
和mouseleave
事件采取行动。
或者使用hover
可以同时处理它们..
$('.myBox').hover(
function(e)
//do the mouseenter things here...
,
function(e)
//do the mouseleave things here...
);
http://www.jsfiddle.net/gaby/ECYD4/ 的示例
【讨论】:
我试图在我将鼠标悬停在某物上时产生延迟,因此它不会立即关闭,但可能会在 3 秒后关闭,但如果我将鼠标悬停,然后重新悬停,取消悬停,所以如果有人不小心悬停,它不会立即关闭。 @android.nick 请参阅我的问题的更新,了解如何调整 Gaby 的代码以执行您想要的操作。 jsfiddle.net/Scobler/ThLqx/12以上是关于Jquery:如果 mouseleave = true 则执行此操作的主要内容,如果未能解决你的问题,请参考以下文章
jquery mouseleave 效果通过 div 的下边框
如何使用 if hasClass 条件禁用 jQuery mouseleave 事件? //悬停动画
鼠标快速移动时不会触发jQuery mouseleave函数