html - 具有悬停状态的图像按钮

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;
}