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。您还可以修改按钮和图像上的其他样式。

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

Answer 2

如果你有一点点javascript，那么你可以通过这种方法轻松解决问题[ beginner ]

JSFIDDLE：http://jsfiddle.net/RaA66/1/

<强> HTML

<input type="image" id="s_button" src="image1.png" alt="Submit Form"
 onmousedown="clicked(this);" 
 onmouseup="normal(this);" 
 onmouseover="hover(this);" 
 onmouseout="normal(this);" 
/>

js [把它放在<head><script>..</script></head>标签中。]

function clicked(el) {
    el.src = 'onclickimage.png';
}


function normal(el) {
    el.src = 'image1.png';
}


function hover(el) {
    el.src = 'onhoverimage.jpg';
}

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

2 个答案: