带悬停状态的图像按钮

Question

我无法制作图像按钮，但显示不正确。

HTML

<div class="icon">
   <a role="button"></a>
</div>

CSS

.icon{
background: url('assets/icon.png')
}
.icon:hover{
background: url('assets/icon-hover.png')
}

有更好的方法吗？

Answer 1

我认为您的问题与没有任何内容的div有关。尝试将宽度和高度添加到与icon.png

的尺寸相匹配的div

.icon {
  width: 50px;
  height: 50px;
}

Answer 2

你不应该使用div作为按钮（它不可点击），单<a>就足够了。

<a href='#' class="btn">Button</a>

根据您的目标，您可能希望使用<button> 何时使用以下内容：https://css-tricks.com/use-button-element/

由于您没有文字的链接，因此不会将任何内容显示为背景;正如@PatrickKelly所提到的，您需要设置宽度和高度并将显示更改为内联块，因为默认情况下<a>是内联的。

.btn {
    display: inline-block;
    width: 50px;
    height: 50px; 
}

没有文字的图像链接/按钮对于可访问性（屏幕阅读器）是不利的。请参见此处的13：https://www.sitepoint.com/15-rules-making-accessible-links/