在悬停时更改按钮的图像？

Question

您好我有一个HTML按钮，设置如下：

<input type="image" src="derp.png">

由于图像未通过CSS分配，我是否打算在悬停时更改它？

Answer 1

一种非常简单的方法：

<input type="image" src="derp.png" onMouseOver="this.src='aderp.png'" onMouseOut="this.src='derp.png'">

JSFiddle（演示）：http://jsfiddle.net/E6xHr/

有更多不显眼的方法可以做到这一点，但这会奏效。

Answer 2

以下内容可行（虽然目前未经测试），但它需要将备用图像存储在custom data-*属性中，以便脚本知道在哪里找到它，然后存储原始{{ 1}}在类似的src中，以便将其放回鼠标输出：

data-*

JS Fiddle demo

请注意，上述内容要求您的var inputs = document.getElementsByTagName('input'); for (var i = 0, len = inputs.length; i < len; i++) { input = inputs[i]; input.onmouseover = function(){ this.setAttribute('data-orig-image',this.getAttribute('src')); this.src = this.getAttribute('data-alt-image'); }; input.onmouseout = function(){ this.src = this.getAttribute('data-orig-image'); }; }​ 拥有HTML表单：

input

---

已编辑以添加CSS选项，遗憾的是，该选项有些不完善，并要求<input type="image" src="http://path.to/default/image.png" data-alt-image="http://path.to/mouseover/image.png" />​ 在input属性中没有设置图片：

src

JS Fiddle demo

Answer 3

我可以看到两个选项：

1）CSS

input.change {
background-image:url(derp.png);
}

input.change:hover {
background-image:url(mouseover.png);
} 

（将类'change'添加到示例中的input元素中。）

2）JavaScript

<input type="image" src="derp.png" onmouseover="this.src='mouseover.png'" onmouseout="this.src='derp.png'">

Answer 4

由于提供的大多数答案都是基于JavaScript原生或基于CSS的，我建议使用jQuery解决方案。您只需在jQuery中使用hover()。

jQuery脚本

$(document).ready(function() {
 $('#img1').hover(function() {
    $('#img1').attr('src','second_img.jpg');
  }, function() {
   // do something here
   alert('hovered out');
 });
});

<强> HTML

<input id="img1" type="image" src="first_img.png">

请参阅working example。

Answer 5

我的想法是将图像放在按钮下，并将按钮背景图像转换的alpha设置为0，以便您可以看到下面的图像。