Jquery：如果 mouseleave = true 则执行此操作答案

【问题标题】：Jquery: if mouseleave = true then DO THISJquery：如果 mouseleave = true 则执行此操作
【发布时间】：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 语句

【问题讨论】：

标签： jquery hover mouseover mouseleave

【解决方案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