html - 如何更改鼠标悬停时 HTML 按钮的图像等

Question

如何指向不同按钮状态的不同图像？ 鼠标悬停等。

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 提供此功能的当今时代不建议使用。