Question

当onmouseover时，它应该看起来像

<input type="image" src="1.jpg" />

当onmouseout时，它应该看起来像

<input type="image" src="2.jpg" />

Answer 1

我会保留<input type=reset>并使用Javascript隐藏它，创建一个<a>元素并根据我的喜好设置样式，将click上的事件处理程序附加到锚点以触发重置，并在锚点上使用CSS :hover，以便更改背景图像。没有Javascript的用户将看到常规的'重置按钮。

Answer 2

在CSS中添加:hover的正确规则;它应该适用于IE以外的所有内容，它不支持在任何元素中悬停。

Answer 3

我不确切知道你要做什么，但是像Tordek一样，我建议使用CSS和：hover

这是CSS：

.myButton{
  background:url("2.jpg") no-repeat;
  width: 200px;
  height: 100px;
  border: none;
}
.myButton:hover {
  background:url("1.jpg") no-repeat;
  width: 200px;
  height: 100px;
  border: none;
}

这是HTML：

<input type="submit" class="myButton" value="">

Answer 4

不要担心更改重置按钮本身的显示，使其不可见。创建自己的重置按钮，由带有href哈希的链接表示，并在单击时调用其余按钮：

<a href="#" class="resetPush">
  <span>Reset</span>
</a>

加上以下javascript：

$("input[type='reset']").hide();
$("a.resetPush").click(function(e){
  e.preventDefault();
  $("input[type='reset']").trigger("click");
});

至于链接的翻转效果，css可以为你处理：

a.resetPush span { display:none; }
a.resetPush      { display:block; width:100px; height:25px;
                   background: url("slider.jpg") left top no-repeat; }
a.resetPush:hover{ background-position: left bottom; }

Answer 5

<input type="image">仅用于展示某种地图，其中最终用户可以指定特定位置。

但你不想这样做。您只需要一个带有背景图像的按钮。因此，我建议将<input type="reset">替换为设置为background-image的CSS url(path/to/your/image.png)。然后你可以添加一些Javascript（jQuery可能？有一个hover函数），它可以在mouseover和mouseout上更改CSS类。例如：

$("#buttonid").hover(
    function () {
        $(this).addClass('hover');
    }, 
    function () {
        $(this).removeClass('hover');
    }
);

使用CSS

#buttonid {
    background: url(path/to/your/image.png);
}
#buttonid.hover {
    background-position: 20px; /* Make use of CSS sprites. */
}

（更多关于CSS sprites here）

有人会建议使用CSS :hover伪类，但这并不适用于<a>以外的其他元素的所有浏览器。

如何实现自定义<input type =“reset”/>？

5 个答案: