Html 更改悬停按钮的图像？

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

由于图像不是通过CSS分配的，如何在悬停状态下更改图像？

一种非常简单的方法：

JSFIDLE（演示）：

---

有更多的不引人注目的方法来实现这一点，但这将起作用。

类似的东西将起作用（尽管目前未测试），它要求将备用映像存储在custome

data-*

属性中，以便脚本知道在哪里找到它，然后将原始的

src

存储在类似的

data-*

中，以便将其放回mouseout：

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');
    };
}​

---

编辑以添加CSS选项，不幸的是，该选项有点不完善，需要

输入

在其

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);
}​

---

.

我可以看到您有两个选择：

1） CSS

（将类“change”添加到示例中的输入元素中。）

2） JavaScript

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

---

由于提供的大多数答案都是JavaScript本机或基于CSS的，因此我建议使用jQuery解决方案。您只需在jQuery中使用

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">

---

---

请参阅。

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

JavaScript将是一种方法；这可以接受吗？@dqlopez我只想在鼠标悬停在按钮上时更改图像。@dqlopez我不认为这很难理解。大多数浏览器都有一个默认属性，即当鼠标悬停在按钮上时高亮显示按钮。@DavidThomas我会使用Javascript，但我不熟悉用它来修改我的HTML。如果你能举个例子吗？谢谢。z-index可能会有帮助。。谢谢，我会玩的，这似乎是一个很长的路要走。不过还是要谢谢你。刚刚更正了演示；看看链接的演示。CSS选项绝对是我最喜欢的选项，而且可能是我最喜欢的选项，因为我的HTML仍然可以验证，而且更简单（至少对我来说）；）令人惊叹的；唯一的问题是，您需要为每个图像输入指定所有不同的状态（只有当您有很多图像输入时，这才是一个问题）。这里唯一的问题是，它总是通过图像显示“提交查询”。（也在演示中）。解决方法是：为“输入”设置一个“src”：制作一个大小相同的透明gif，并将其放置到位。完美无瑕。嗯，我会试试你建议的CSS方法，它看起来干净、通畅。谢谢。Nup CSS方法不起作用。javascript有，但它不是验证器友好的=（：）你需要它来验证吗？不，我只是喜欢它验证（成就感），但我不会浪费时间在一个按钮=P上，尽管我得到了CSS方法，所以它现在很好=谢谢，顺便说一句，这为什么不能验证呢？我只是通过W3C以HTML5的形式运行了它，唯一缺少的是一个ALT标记。一旦你把它加进去，它就通过了<代码>此文档已成功检查为HTML5谢谢，但我决定坚持使用CSS方法=不用担心。以防万一有一天您会在jQuery解决方案中绊倒：）

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

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