html - 在 CSS 不起作用的情况下更改鼠标悬停的图像

Question

使用 CSS，我想要一个随着鼠标在其上移动而改变的图像/链接。我不明白为什么下面的代码不起作用。 @user.twitter 确实有一个值。由于链接没有文本，只有图像，所以我有点不确定将什么作为括号后面的第一个值。就目前而言，屏幕上根本没有显示任何图像。下面的代码有什么问题？

HTML代码:

<%= link_to("", @user.twitter, :class => "twitter") %>

CSS:

.twitter {
  width: 20px;
  height: 20px;
  background: image-url('twitter.png');
}
.twitter:hover {
  background: image-url('twitter_.png');
}

更新:如果我检查页面的源代码，它是:

<a class="twitter" href="http://www.example.com"></a>

Answer 1

如果没有使用实际 HTML 和 CSS 的演示，很难确定，但您的 CSS 格式有点不正确。

此外，链接需要是 inline-block 或 block 而不是默认的 display:inline

.twitter {
  width: 20px;
  height: 20px;
  background-image: url(http://4.bp.blogspot.com/-HkpT3JSkNWA/Txcu2eo0A-I/AAAAAAAAAlY/0eUq2M85Px8/s000/twitter.png);
  background-size: cover;
  display: inline-block;
}
.twitter:hover {
  background-image: url('http://www.easychirp.com/images/share/twitter.png');
}

<a class="twitter" href="http://www.example.com"></a>