image.Advice上的jQuery鼠標懸停事件？

我是jQuery的新手。我想添加一個mouseover事件到一個圖像，它改變了圖像和一個mouseout事件，它將圖像設置回原來的狀態。image.Advice上的jQuery鼠標懸停事件？

我有一個形象

<div id="enter"> 
    <img src="images/entersite.png"/> 
</div>

和一些jQuery代碼

$("#enter").mouseover(function(){ 
    $("#enter").html("<img src='images/entersitehover.png'/>"); 
}); 
$("#enter").mouseout(function(){ 
    $("#enter").html("<img src='images/entersite.png'/>"); 
});

我想將事件添加到圖像元素，而不是股利。我正在讀$(:last:image)之類的東西來選擇最後一張圖片（因爲這是我認爲這將工作的最後一張圖片）。

任何幫助將是偉大的？

或者，如果你能指點我一個體面的教程，我會學習我自己？

來源

2011-02-02 shane87

你可以不喜歡它@lonesomeday回答，但如果你想要一個簡單的鼠標懸停/輸出圖像的變化，我會建議你使用純CSS（例如#element：懸停{}），而不是JavaScript的，它是更快（見：http://stackoverflow.com/questions/175385/what-is-the-preferred-way-to-do-a-css-rollover） – egyedg 2011-02-02 13:13:01

@egyedg：這是一個很好的評論。我使用jquery的唯一原因是玩弄它，因爲我以前從未使用過。 – shane87 2011-02-02 13:19:48

您可以使用hover函數非常簡單地完成此操作，該函數有兩個參數：mouseenter的函數和mouseleave的函數。您還可以使用後代選擇器在#enter內選擇img元素。

最後，您可以直接設置img元素的src屬性。

$('#enter img').hover(function(){ 
    this.src = "images/entersitehover.png"; 
}, function(){ 
    this.src = "images/entersite.png"; 
});

來源

2011-02-02 13:00:51 lonesomeday

image.Advice上的jQuery鼠標懸停事件？

回答

相關問題