Html 更改悬停按钮的图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10331615/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing image for button on hover?
提问by Dragan Marjanovic
Hi I have a HTML button that is setup like this:
嗨，我有一个 HTML 按钮，设置如下：
<input type="image" src="derp.png">
<input type="image" src="derp.png">
As the image is not assigned via CSS how am I meant to change it on hover?
由于图像不是通过 CSS 分配的，我打算如何在悬停时更改它？
采纳答案by David says reinstate Monica
Something like the following would work (though currently untested), it requires the alternate image to be stored in a custome data-*attribute in order that the script knows where to find it, and then stores the original srcin a similar data-*in order to put it back on mouseout:
像下面这样的东西可以工作（尽管目前未经测试），它需要将备用图像存储在客户data-*属性中，以便脚本知道在哪里找到它，然后将原始图像存储src在类似data-*的位置以便将其放回原处鼠标移出：
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');
};
}?
Bear in mind the above requires your inputto have the HTML form:
请记住，以上要求您input拥有 HTML 表单：
<input type="image" src="http://path.to/default/image.png" data-alt-image="http://path.to/mouseover/image.png" />?
Editedto add a CSS option, which is somewhat imperfect unfortunately, and requires that the inputhas no image set in its srcattribute:
编辑添加了一个 CSS 选项，不幸的是，这有点不完美，并且要求input在其src属性中没有设置图像：
input[type=image] {
background-image: url(http://davidrhysthomas.co.uk/img/dexter.png);
background-repeat: no-repeat;
background-position: 50% 50%;
width: 200px;
height: 185px;
}
input[type=image]:hover,
input[type=image]:active,
input[type=image]:focus {
background-image: url(http://davidrhysthomas.co.uk/img/mandark.png);
}?
回答by vimist
A very simple way:
一个非常简单的方法：
<input type="image" src="derp.png" onMouseOver="this.src='aderp.png'" onMouseOut="this.src='derp.png'">
<input type="image" src="derp.png" onMouseOver="this.src='aderp.png'" onMouseOut="this.src='derp.png'">
JSFiddle (demo): http://jsfiddle.net/E6xHr/
JSFiddle（演示）：http: //jsfiddle.net/E6xHr/
There are much more unobtrusive ways to do this, but this will work.
有更多不显眼的方法可以做到这一点，但这会奏效。
回答by Mitch Satchwell
You have two options that I can see:
我可以看到您有两个选项：
1) CSS
1）CSS
input.change {
background-image:url(derp.png);
}
input.change:hover {
background-image:url(mouseover.png);
}
(Adding the class 'change' onto the input element from your example.)
（将类“change”添加到示例中的输入元素上。）
2) JavaScript
2）JavaScript
<input type="image" src="derp.png" onmouseover="this.src='mouseover.png'" onmouseout="this.src='derp.png'">
回答by deex
Since most answers provided were JavaScript native or CSS based approached, I'll suggest a jQuery solution. You can simply use hover()in jQuery.
由于提供的大多数答案都是 JavaScript 本机或基于 CSS 的方法，我会建议一个 jQuery 解决方案。您可以简单地hover()在 jQuery 中使用。
jQuery script
jQuery 脚本
$(document).ready(function() {
$('#img1').hover(function() {
$('#img1').attr('src','second_img.jpg');
}, function() {
// do something here
alert('hovered out');
});
});
HTML
HTML
<input id="img1" type="image" src="first_img.png">
See working example.
请参阅工作示例。
回答by TokeBloke
My idea would be to put an image under the button and have the alpha for the button background image transition set to 0 so that you can see the image under.
我的想法是将图像放在按钮下方，并将按钮背景图像过渡的 alpha 设置为 0，以便您可以看到下方的图像。
