重叠元素的鼠标离开的jQuery问题答案

【问题标题】：jQuery Issue with mouseleave for an Overlapping Elements重叠元素的鼠标离开的jQuery问题
【发布时间】：2013-04-22 09:13:42
【问题描述】：

我对 jQuery 有点陌生，有一个基本问题。这是我正在使用的代码：

$(".v65-productDisplay a img").each(function(){
var productHref = $(this).attr("src");
var productCode = productHref.substring(19,productHref.length-6);

这是在 Volusion 框架中，很多东西都是动态生成的。产品图像都有链接到产品的锚标签，但锚和图像都有 id 或类。我可以通过定位锚标记的 href 属性从产品中获取产品代码，因为链接使用 get 变量。一个示例是 /v/vspfiles/photos/MacFRC-1.jpg，其中 MacFRC 是产品代码。

现在我正在尝试生成一个添加到购物车按钮，您可以使用 GET 变量设置这些按钮，因此对于这个，链接（来自商店内）将是 /ShoppingCart.asp?ProductCode=MacFRC。这是我用来生成它作为对 img 的悬停效果的代码。并不是 $(this).parent() 的目标是作为图像父级的锚标记。我这样做是因为 .v65-productDisplay 中还有其他锚标记，但使用的是跨度，我只是在处理图像。

$(this).mouseenter(function(){
    $(this).parent().append("<div id='hover_info' style='position:relative;top:-20px;'><div id='add_hover'><a href='/ShoppingCart.asp?ProductCode=" + productCode + "'>Add To Cart</a></div></div>");
})
    .mouseleave(function() {
    $("#hover_info").remove();
});

现在的问题是，当我将鼠标悬停在新生成的具有链接的“hover_info”div 上时，它就会消失。我猜这是因为从技术上讲，我当时正在“鼠标离开”img，并且 jQuery 正在运行以删除 div。

有没有办法将 jQuery 中的函数设置为“如果我的鼠标离开这个元素以及它的所有子元素”之类的东西？我想这就是我正在寻找的东西。

感谢您的帮助！

【问题讨论】：

我头晕目眩。需要问题的演示。另外，什么是“GET 变量”？
嗨@Beetroot-Beetroot，GET 变量是一个表单变量（与 POST 变量相反）。它被附加到 URL 上，因此服务器端脚本可以解释要做什么。这就是 Volusion 允许您通过直接链接将商品添加到购物车的方式。
服务器端，这样的变量可以称为“GET变量”。由于我们是客户端，因此“URL 查询字符串参数”或只是“查询字符串参数”会是一个更好的术语。

标签： javascript jquery hover mouseleave

【解决方案1】：

还有当鼠标离开元素或其子元素时触发的 mouseout 事件，但我认为这不是您想要的。

您可以做的是在鼠标离开图像时检查鼠标是否在 div 上，并对 div 执行相同操作 - 检查鼠标是否在鼠标离开 div 上的图像上。您可以使用 .is(":hover") 来检查这一点，但它不适用于所有浏览器，所以我最好添加/删除类来区分这一点。

$(this).mouseenter(function(){
    $(this).addClass("hovered").parent().append("<div id='hover_info' style='position:relative;top:-20px;'><div id='add_hover'><a href='/ShoppingCart.asp?ProductCode=" + productCode + "'>Add To Cart</a></div></div>");    
})
.mouseleave(function() {
    $(this).removeClass("hovered"); 
    if (!$(this).parent().find("#hover_info").hasClass("hovered")) 
        $(this).parent().find("#hover_info").remove();
});

并为#hover_info添加mouseenter mouseleave，只需使用“live”（或“on”），以便即使元素尚不存在也可以绑定事件处理程序

$("#hover_info").live({
    mouseenter: function() { 
        $(this).addClass("hovered");
    },
    mouseleave: function() {
    $(this).removeClass("hovered");
    if (!$(this).parent().find(".v65-productDisplay a img").hasClass("hovered"))
        $(this).remove();
    }
});

【讨论】：