如何更改鼠标上的HTML按钮的图像等

Question

如何指向各种按钮状态的各种图像？Onmouseover等

Answer 1

HTML

<button>Hello</button>

CSS

button {
    background: url(your-image.png) no-repeat;
}

button:hover {
    background: url(your-image-hovered.png) no-repeat;
}

button:focus {
    background: url(your-image-focused.png) no-repeat;
}

注意:所有IE版本都不支持:focus和:hover伪类(至少在按钮上).您可以使用JavaScript进行模拟.查看事件blur()和focus()(模拟:focus)onmouseover()和onmouseout()(模拟:hover).

或者,如果您需要支持一个非常古老的浏览器(非常不可能),您可以使用JavaScript,但是当CSS提供此功能时,不建议在这个时代使用.