Question

我想知道是否有任何方法可以在JavaScript，PHP或HTML（或CSS）中更改鼠标悬停的图片。我这样做就像＆＃39;喜欢＆＃39;对于来自数据库的不同响应，将需要两个不同的URL（尽管我会对其进行排序）。提前谢谢。

Answer 1

基本Javascript：

<img src="image_1.png" alt="Image" onmouseover="javascript:this.src='image_2.png';" onmouseout="javascript:this.src='image_1.png';" />

Answer 2

这是一种使用vanilla javascript的方法：

<强> HTML：

<img id="tychus" src='http://img1.wikia.nocookie.net/__cb20080516020746/starcraft/images/4/4e/TychusFindlay_SC2_CineTrailer3.jpg' height="200" width="400"/>

<强> JavaScript的：

var pic = document.getElementById('tychus');
pic.addEventListener('mouseover',function() {     this.setAttribute('src','http://fc00.deviantart.net/fs18/f/2007/155/f/1/Queen_of_Blades_by_OmeN2501.jpg');
});
pic.addEventListener('mouseout',function() {
    this.setAttribute('src','http://img1.wikia.nocookie.net/__cb20080516020746/starcraft/images/4/4e/TychusFindlay_SC2_CineTrailer3.jpg');
});

这适用于鼠标悬停和鼠标移出。

here is an example fiddle

如何在鼠标悬停时更改图片？

2 个答案: