僅限JavaScript的圖像懸停

這純粹是爲了學習的目的;我知道CSS會是這種情況的首選方法。僅限JavaScript的圖像懸停

我知道，在JavaScript中，你可以使用內聯事件處理懸停在圖像，像這樣：

<img src="image.png" onMouseover="src='image2.png'" onMouseout="src='image.png'">

而且我知道你可以在你的網站上安裝了jQuery，並執行以下代碼或類似：

HTML：

<img src="image.png" id="image-hover">

的jQuery：

$(document).ready(function() { 
     $("#hover-example").mouseover(function(){ 
      $(this).attr("src", "image-hover.png"); 
     }); 

     $("#hover-example").mouseout(function(){ 
      $(this).attr("src", "image.png"); 
     }); 
    });

我想知道如何使用JavaScript來產生輸出，但使用外部腳本而不是內聯事件處理。我試過瀏覽各種Stack Overflow和Google搜索，但大多數情況下他們導致使用jQuery。將這個簡單的內聯JavaScript應用到外部腳本可能會很複雜嗎？

謝謝！

來源

2015-06-16 Tania Rascia

var image = document.getElementById("hover-example"); 
image.onmouseover = function() { image.src = "image-hover.png"; } 
image.onmouseout = function() { image.src = "image.png"; }

來源

2015-06-16 22:09:28

非常感謝！這是我理解的最簡單也是最簡單的答案。我會鼓勵你，但我還是太新了。我不完全確定爲什麼我的帖子陷入低谷;我知道這是一個愚蠢的簡單問題，但我學到了一些東西，也許別人會這樣做。 –

-1

由於您對vanilla JavaScript實現感興趣，請查看mouseover事件的文檔。

你可以做這樣的事情達到您想要的結果：

var img = document.getElementById('image-hover'); 

img.addEventListener('mouseenter', function() { 
    this.src = 'image-hover.png'; 
}, false); 

img.addEventListener('mouseleave', function() { 
    this.src = 'image.png'; 
}, false);

來源

2015-06-16 22:08:33

謝謝！我會看看文檔。 –

幾乎相同的方式

var img = document.getElementById('image-hover'); 

img.addEventListener('mouseenter', function() { 
    this.src = 'image-hover.png'; 
}, false); 

img.addEventListener('mouseleave', function() { 
    this.src = 'image.png'; 
}, false);

來源

2015-06-16 22:10:52 adeneo

非常感謝！我測試了它，它工作。它還有一些我還沒學到的元素，所以現在我知道要查找它們。 –

僅限JavaScript的圖像懸停

回答

相關問題