如何更改鼠标上的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提供此功能时，不建议在这个时代使用。