如何在鼠标悬停时更改图片？ [复制]答案

【问题标题】：How do I make a picture change on mouseover? [duplicate]如何在鼠标悬停时更改图片？ [复制]
【发布时间】：2014-04-03 17:18:10
【问题描述】：

我想知道是否有任何方法可以在 JavaScript、PHP 或 HTML（或 CSS）中更改鼠标悬停时的图片。我这样做是作为一个“喜欢”按钮，并且需要两个不同的 URL 来获取来自数据库的不同响应（不过我会解决这个问题）。提前致谢。

【问题讨论】：

是的，如果是图片，则需要更改 src 属性
@juvian 在上述任何一种语言中你会如何做到这一点？
@TylerH 给的链接里已经有例子了
你试过用谷歌搜索这个吗？
啊。也许我应该这样做。

标签： javascript php html css

【解决方案1】：

基本的Javascript：

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

【讨论】：

次要注意：javascript: 在事件处理程序的开头是不必要的 - 只有href 属性才需要它
谢谢！这很好用。

【解决方案2】：

这是一种使用原生 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

【讨论】：

@freefaller 很高兴知道。我想我对简单的定义并不简单。
他们都做同样的工作，第一个更简单。