jQuery的問題與鼠標離開一個重疊的元素

Question

我是jQuery的新手，有一個基本問題。 這是我正在使用的代碼：

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

這是在Volusion框架中的，並且很多東西是動態生成的。 產品圖像都具有鏈接到產品的定位標記，但是定位標記和圖像也沒有ID或類。 我能夠通過，因為鏈路使用GET變量定位錨標記的href屬性搶從產品的產品代碼。 一個例子是/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的功能，像“如果我的鼠標離開這個元素，以及它的所有子元素”？ 我正在尋找的正是這種想法。

謝謝你的幫助！

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