Question

当谷歌搜索这个障碍时，它提供了大量有关如何将css和不同的静态按钮应用为翻转的信息，将图像用作表单中的按钮。

我的问题是，您如何更改每个鼠标事件的按钮（在按钮上）以及您是否为所有状态使用一个图像？

例如......我的按钮

有以下HTML

<input type="image" id="login_submit" name="login_submit" src="button_login.png" />

并且分开给我，我之前使用过以下的CSS ...

#login_submit a {
   outline: none;
   text-indent: -5000px;
   display:block;
   margin-left: auto;
   margin-right: auto;
   width: 141px;
   height: 36px;
   background: url("button_login.png") 0 0 no-repeat;
}
#login_submit a:hover {
   background-position: -141px 0;
}
#login_submit a:active {
   background-position: -282px 0;
}

现在很明显它目前无法运作......所以我该如何解决呢？我正在寻找一个更“纯粹”的CSS解决方案，所以没有JS可以让这一天变亮。

或者我应该坚持每个州都有2/3个单独的按钮？

Answer 1

好主要问题似乎是你试图将一个孩子的锚设置为“#login_submit”而不仅仅是“#login_submit”，试试这个：

#login_submit {
   outline: none;
   text-indent: -5000px;
   display:block;
   margin-left: auto;
   margin-right: auto;
   width: 141px;
   height: 36px;
   background: url("button_login.png") 0 0 no-repeat;
}
#login_submit:hover {
   background-position: -141px 0;
}
#login_submit:focus {
   background-position: -282px 0;
}

祝你好运，利奥

Answer 2

我也有这个问题，但刚解决了。

使用输入类型=＆＃34;图像＆＃34;并将1x1px空白（透明）.png或.gif添加到表单元素的src中。然后使用CSS将背景设置为双倍（或者，在上面的情况下，三倍）翻转图像。表单元素使用空白.png作为图像，但在它下面是CSS处理的背景图像，显示了一个漂亮的工作翻转，其高度和宽度都有提交按钮功能。

=）

代码直接来自我的情况：

HTML：

<div class="formrow">
<input id="send" type="image" src="../blank.png" name="Submit" onclick="submit" alt="Send" />
</div>

CSS：

#send
{
    height: 25px;
    width: 107px;
    overflow: hidden;
    display: block;
    float: right ;
    background: url('../images/style/button-send.png');
}


#send:hover
{
    background-position: 0 -25px;
}

我希望这会有所帮助。 =）

顺便说一句，对我来说，这种方法也解决了svict4提到的问题。 =）

使用CSS输入按钮，单个图像翻转

2 个答案: