1

当鼠标悬停时，它应该看起来像

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

当 onmouseout 时，它应该看起来像

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

5 回答 5

1

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

于 2009-10-22T03:31:19.860 回答
0

我不确切知道您要做什么，但是像 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="">
于 2009-10-22T03:27:00.560 回答
0

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

于 2009-10-22T02:05:08.713 回答
0

这<input type="image">只是为了呈现某种地图，最终用户可以在其中指出特定的位置。

但你不想那样做。您只需要一个带有背景图像的按钮。因此，我建议用设置为<input type="reset">.cs 的 CSS替换它。然后，您可以添加一些 Javascript（可能是jQuery？有一个悬停功能），它会在鼠标悬停和鼠标悬停时更改 CSS 类。例如：background-imageurl(path/to/your/image.png)

$("#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 精灵的信息）

有些人会建议为此使用 CSS:hover伪类，但这不适用于除<a>.

于 2009-12-15T00:26:43.010 回答
0

不要担心更改重置按钮本身的呈现方式，让它不可见。制作您自己的重置按钮，由带有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; }
于 2009-12-15T00:05:54.780 回答