html - 在 CSS 3 中悬停或激活时更改按钮图像

Question

我在 HTML 中设置了以下按钮

<input type="image"  id="s_button" src="s_button.png " alt="Submit Form" />
<input type="image"  id="s_b_advanced" src="s_b_advanced.png " alt="Submit Form" />

和下面的 CSS

#s_button{
    top: 328px;
    position: absolute;
    left: 970px;
    height: 50px;
}
#s_b_advanced{
    top: 312px;
    position: absolute;
    left: 1040px;
    height: 80px;

我在 Illustrator 中为按钮的悬停和事件状态创建了其他按钮图像。如何在鼠标悬停并激活时更改按钮图像？我不想应用边框或任何东西，我更愿意使用我创建的其他图像

Answer 1

您可以使用 <button> 执行此操作标记而不是使用 <input> ，然后通过CSS伪元素:before修改图片(或 ::before 如果你想 ignore IE8 )。您需要如下内容:

HTML:

<button id="s_button"></button>

CSS:

#s_button { /*normalize button styles*/
    background:white;
    border:none;
    padding:0;
    margin:0;
}
#s_button:before {
    content: url('http://i.imgur.com/JropBNb.png?1');
    width:25px;
    height:25px;
}
#s_button:hover:before {
    content: url('http://i.imgur.com/fJJtNWc.jpg?1');
}
#s_button:active:before {
    content: url('http://i.imgur.com/KhLxNLo.png?1');
}

Demo

:before然后选择器将根据按钮是否悬停而改变。我使用的图像只是来自 Google 的一些示例图像，但您当然可以在那里使用任何有效的 URL。您还可以修改按钮和图像上的其他样式。

第一个样式 block 是撤消应用于 <button> 的默认样式元素，同时仍保留按钮本身的表单提交效果。