标签: mouseleave

jQuery的mouseout()和mouseleave()有什么区别？

我有一组列表元素(<li>在a中<ul>)在这样的图表上布局为气泡,其中气泡是<li>元素:

http://i.stack.imgur.com/PR7vR.png

我希望能够发现它们之间的区别

1. 将鼠标从气泡#1移动到网格
2. 将鼠标从气泡#1 直接移动到另一个气泡,例如气泡2

我试图$(this)在.mouseleave()偶数气泡中使用它,但是它会记录你要离开的元素而不是你当前正在悬停的元素.

关于如何获得鼠标移动元素的任何想法mouseleave()？

假设我有两个特殊的div,A和B,它们在一个角落重叠:

+-----+
|     |
|  A  |
|   +-----+
+---|     |
    |  B  |
    |     |
    +-----+

我想触发当鼠标离开的事件都 A和B.

我试过这个

$("#a, #b").mouseleave(function() { ... });

但是如果鼠标离开任一节点,这会触发事件.我希望在鼠标未超过任一节点时触发事件.

是否有捷径可寻？我有一个想法,涉及全局变量跟踪每个div上的鼠标状态,但我希望更优雅的东西.

我正在创建一个站点,您将鼠标悬停在图像上,它显示一个元素(在这种情况下,通过将其高度从0扩展到154px).

jQuery(document).ready(function(){
    jQuery("#dropdown-menu-create .dropimage").mouseover(function(){
        jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200);
    });
    jQuery("#dropdown-menu-create .dropimage").mouseout(function(){
        jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200);
    });
});

当鼠标离开时内容会扩展,当鼠标离开时内容会折叠,但每次鼠标在元素内移动时,内容会反复展开并折叠,直到鼠标离开元素.

我之前从未遇到过这个问题,过去我曾经使用过这些功能,所以我不知道发生了什么.有任何想法吗？

编辑:

jQuery(document).ready(function(){
    jQuery("#dropdown-menu-create .dropimage").mouseenter(function(){
        jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"154px"},200);
    });
    jQuery("#dropdown-menu-create .dropimage").mouseleave(function(){
        jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"0"},200);
    });
});

我现在使用上面的代码,仍然得到完全相同的问题.我已经尝试过.stop函数的所有变体(false,false)(false,true)(true,false)(true,true).每个问题都会出现不同的问题,但仍然会发生.

终极编辑:

问题是,一旦调用该函数,鼠标所覆盖的内容就会被不同的内容覆盖.因此,在任何给定点,鼠标同时进入和离开图像.通过将函数调用移动到另一个元素来解决问题.

这让我发疯.

有没有办法只有在div通过底部边框时才能触发mouseleave jquery效果？

也就是说,如果鼠标指针通过任何其他3个边界离开div,则阻止发生所述效果.

我想这肯定是某种坐标问题,但两个位置都没有偏移似乎就像我的答案.

如果可以做到这样的事情,那么非常感谢关于如何做到这一点的最简单的例子.

如果已经询问(并回答)类似的问题,任何重定向也将受到赞赏.

谢谢!

我有Form子类,带有处理程序MouseHover和MouseLeave.当指针位于窗口的背景上时,事件工作正常,但当指针移动到窗口内的控件上时,它会引发MouseLeave事件.

无论如何有一个覆盖整个窗口的事件.

(.NET 2.0,Visual Studio 2005,Windows XP.)

我有这个JQuery代码的问题:

$(".item").mouseenter(function(){
    $(this).addClass("active");
    $(this).removeClass("item");
    $(".item").hide(700);
}).mouseleave(function(){
    $(this).stop();
    $(this).addClass("item");
    $(this).removeClass("active");
    $(".item").show(700);
});

这是我的HTML:

<ul>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
</ul>

我想当我悬停在一个项目上,其他项目隐藏,代码工作正常但问题就在那里,如果我在隐藏的持续时间(700毫秒)中悬停另一个项目,它将创建一个隐藏/显示项目的循环.我该怎么做才能防止这种情况发生.

的jsfiddle

注意:我希望悬停的项目向左移动,而不是保持固定.

我正在使用jQuery执行一个关于mouseenter/mouseleave的操作,它似乎正在工作但不是当我退出div时.这仅在退出实际窗口时有效.

这是我的jQuery

$(document).ready(function() {
  $(".pods .col").on("mouseenter", function() {
    $(this).find(".pod-overlay").addClass("show")
  });
  $(".pods .col").on("mouseleave", function() {
    $(this).find(".pod-overlay").removeClass("show")
  });
});

这是我的HTML

<div id="splash" class="section section-splash bg">
  <div class="pods">
    <div class="col col-4">
      <div id="pod-splash-food" class="pod pod-food">
        <div class="pod-overlay"></div>
      </div>
    </div>
  </div>
</div>

我在这里做了一个小提琴.我正在学习jquery,所以建议表示赞赏.

http://jsfiddle.net/34h48148/

使用鼠标滚轮向下滚动页面时,在移动光标之前,不会在IE11中触发mouseleave事件.适用于谷歌浏览器.

jsFiddle:http://jsfiddle.net/tonyleeper/5vwf65f7/

HTML

<div class="box">Move the mouse cursor inside this box and observe the mouseenter event fires (background goes green). Next, use the mouse wheel to scroll down without moving the mouse cursor position, observe the mouseleave event doesn't fire. Finally, move the mouse cursor even a little, say 1px, and observe that the mouseleave event then fires</div>

CSS

.box {
    font-family: arial;
    font-size: 16px;
    width: 300px;
    height: 200px;
    background-color: #000077;
    color: #ffffff;
}

JavaScript的

var box …

我有以下问题：在 Mozilla Firefox 中，每当我将a悬停dropdown 在表格内时，它都会触发mouseleave表格事件，尽管鼠标光标仍在表格内。在 Chrome 或 Edge 中没有这样的问题。

这是我的带有示例数据的代码：

演示

我有一个表格，当鼠标光标进入表格时，最后一行出现。当鼠标离开 - 行隐藏。只有当我离开桌子时，该行才应该隐藏

是否有某种方法或解决方法可以防止发生不必要的 mouseleave 事件？