0

我对 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.jpgMacFRC 是产品代码。

现在我正在尝试生成一个添加到购物车按钮，您可以使用 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 中的函数设置为“如果我的鼠标离开这个元素以及它的所有子元素”？我想这就是我正在寻找的东西。

谢谢你的帮助！

4

1 回答 1

0

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

您可以做的是在 mouseleave-ing 图像时检查鼠标是否在 div 上，并对 div 执行相同操作 - 检查鼠标是否在 mouseleave-ing 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();
    }
});
于 2013-04-22T11:53:12.053 回答