Jquery：如果mouseleave = true，则执行此操作。

Question

简单的问题，我该如何在Jquery中实现以下功能：

测试鼠标是否悬停在.myBox上。

    if ($(".myBox").mouseleave = true) {
        DO SOMETHING
    } else {something else}

或者

    if ($(".myBox").mouseover = false) {
        DO SOMETHING
    } else {Something else}

注意：我正在寻找一个IF语句

- android.nick

Answer 1

jQuery提供了is方法，用于检查与jQuery对象相关的条件。在您的情况下，您可以检查:hoverCSS伪类：

$('.myBox').is(':hover') === true

请看这个演示，尝试点击按钮（它将弹出 true），然后使用制表键并按下按钮（不用鼠标，它会返回false）。

演示地址： http://jsfiddle.net/marcuswhybrow/LL5JD/

- Marcus Whybrow

---

在Chrome中测试过了，刚在FF中测试了一下，但是没有工作...正在调查中。 - Marcus Whybrow

在jQuery中似乎存在一个错误：未捕获的异常：语法错误，无法识别的表达式：hover。 - Marcus Whybrow

你报告了这个Bug吗？因为你提供的正是我想要的，可恶的Bug！ - android.nick

Answer 2

请看jQuery鼠标悬停事件

$(".my_box").mouseover(function(){
    // Mouse over...
});

$(".my_box").mouseout(function(){
    // Mouse left...
});

这里有一个例子，在鼠标悬停在图片上时添加边框，如果在一定时间内没有再次悬停，则移除该边框：点击此处查看效果

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

- Scoobler

Answer 3

没错，使用jQuery 1.5.1的$('.myBox').is(':hover')会在Opera浏览器（11.01）中报错，但在我的测试中只有这个浏览器出现了这种情况： Uncaught exception: Syntax error, unrecognized expression: hover

解决方法是使用否定表达式：$('.myBox').is('not(:hover)') 这在我的测试中可以在Opera 11、FF4、IE7和Chrome 5中正常工作。

- Oliver A. Keith

Answer 4

$(".myBox").hover(
           function(){
               //DO SOMETHING ON MOUSE ENTER
           },
           function(){
               //DO SOMETHING ON MOUSE LEAVE
           }
 });

- TheVillageIdiot

---

实际上，这非常有用。这种结构充当了if无法使用的else子句的作用，例如，在弹出式登录表单中由于Chrome的自动完成而无法（巧合地）使用.hover时。如果您使用.hover，则肯定会获得不希望的行为，相反，当您使用$（“＃foo”）。mouseout（function（）{#The Code}，function（）{}）;时，您根本没有问题。 - Luis

@Luis说得好，关于Chrome自动填充的问题，有人说将文本输入框包装在<form>标签中可以解决。我尝试了一下，确实有效！ - TheVillageIdiot

Answer 5

这对我起了作用：

var hover = false;
$('.someClass').each(function(i,e){
    hover = !hover ? $(e).is(':hover') : true;
});

if (hover)
    // do something
else
    // do something else

- Robert Schmidt

Answer 6

使用 .hover() http://api.jquery.com/hover/

- CrayonViolent

Answer 7

请使用以下代码：http://plugins.jquery.com/project/enterleave-events

$('.myBox').bind('enter leave',function() {
  // do something, use $(this) to get the object
});

- Syl

---

为什么要使用mouseenter和mouseleave事件的插件？它们可以通过bind('mouseenter mouseleave', ...)内部支持。 - Gabriele Petrioli

Answer 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/

- Gabriele Petrioli

---

我正在尝试创建一个延迟效果，当我将鼠标移开某个元素时，它不会立即关闭，而是在大约3秒后关闭。但是如果我再次将鼠标悬停在上面，则取消之前的移开操作，这样如果有人意外地将鼠标移开，它就不会立即关闭。 - android.nick

@android.nick，请查看我在问题更新中的示例，了解如何调整 Gaby 的代码以实现您想要的功能。jsfiddle.net/Scoobler/ThLqx/12 - Scoobler