Question

我对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();
});

现在的问题是，当我将鼠标悬停在新生成的＆＃39; hover_info＆＃39;有链接的div，它消失了。我猜测这是因为从技术上讲，我在这一点上鼠标移动了img并且jQuery正在运行以删除div。

有没有办法将jQuery中的函数设置为类似于＆＃39;如果我的鼠标离开这个元素以及它的所有元素＆＃39;？我认为这就是我想要的那种。

感谢您的帮助！

Answer 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();
    }
});

用于重叠元素的mouseleave的jQuery问题

1 个答案: