使用jQuery，你如何改變懸停在div內的圖像？

我有以下jQuery代碼來替換圖像時，鼠標懸停在上面，但它似乎並沒有工作。下面的代碼有什麼問題？使用jQuery，你如何改變懸停在div內的圖像？

$(function() { 
$("div.delete img") 
    .mouseover(function() { 
     $(this).attr("src", "../../images/comment-hover-del.png"); 
    }) 
    .mouseout(function() { 
     $(this).attr("src", "../../images/comment-del.png"); 
}); 
});

這是我的HTML：

<div class="delete" id="26"><img src="../../images/comment-del.png" border="0"></div>

來源

2010-04-24 leora

與您的問題無關的註釋：HTML中的ID可能不以數字開頭。 – RoToRa 2010-04-26 08:43:39

可以重新排列了一點，像這樣：

$(function() { 
    $("div.delete").hover(function() { 
    $("img", this).attr("src", "../../images/comment-hover-del.png"); 
    }, function() { 
    $("img", this).attr("src", "../../images/comment-del.png"); 
    }); 
});

這是觸發因爲可能會有輕微的閃光，所以這個div懸停當圖像改變時，導致圖像崩潰並且在下一圖像加載之前觸發mouseout。如果您使用上面的方法來防止這種行爲，或者如果您使用當前的方法，則會將寬度/高度分配給<div>。

或者，你可以給div一個background-image CSS屬性和<div>本身懸停（完全刪除<img>），做這一切在CSS中，像這樣：

div.delete { 
    width: 100px; 
    height: 100px; 
    background-image: url('../../images/comment-del.png') center; 
} 
div.delete:hover { 
    background-image: url('../../images/comment-hover-del.png') center; 
}

來源

2010-04-24 11:51:47

-1因爲沒有發佈簡單/快速的解決方案，也建議在後半部分做的事情做完了OP – 2010-04-24 12:04:35

@phpBOY - 我發佈了*最佳*解決方案在這種情況下，簡單的解決方案並不總是**正確**一個。看到另一個答案，它根本解決不了問題，我在答案中詳細描述了它，以及它如何解決問題。 – 2010-04-24 12:06:33

看到我的回答 – leora 2010-04-24 12:15:52

試試這個：

$(function() { 
$("div.delete") 
    .mouseover(function() { 
     $(this).find('img').attr("src", "../../images/comment-hover-del.png"); 
    }) 
    .mouseout(function() { 
     $(this).find('img').attr("src", "../../images/comment-del.png"); 
}); 
});

來源

2010-04-24 11:50:40 Sarfraz

這是不正確的，他的選擇器已經是''，你正在尋找'

' – 2010-04-24 11:58:49

這似乎不工作 – leora 2010-04-24 11:59:18

@oo：請看我更新的答案。 – Sarfraz 2010-04-24 12:00:13

其實，我的原代碼好吧，但我只是意識到圖像和div被動態地放在那裏。因此，我需要使用下面的直播活動。

（我意識到這一點後，一些很好的答案，也沒有工作，這沒有任何意義。）

$('div.delete img').live('mouseover mouseout', function(event) { 
    if (event.type == 'mouseover') { 
     $(this).attr("src", "../../images/comment-del-hover.png"); 
    } else { 
     $(this).attr("src", "../../images/comment-del.png"); 
    } 
});

來源

2010-04-24 12:15:05 leora

你不能做這樣的效果雖然。如果您想要更改src並且還可以爲其設置動畫效果，請執行以下操作：

$("#clone_el").css("z-index",2); 
ele = $("#clone_el").clone().css({position:"relative","top":"-"+$("#clone_el").eq(0).height()+"px","z-index":"1"}).attr("src","/path/to/new/src"); 

$("#clone_el").after(ele).fadeOut();

來源

2010-04-24 13:26:56 XGreen

使用jQuery，你如何改變懸停在div內的圖像？

回答

相關問題