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＆amp;的演示版，很难确定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>

Answer 2

这是我的CSS：

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

Answer 3

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

在CSS无效的情况下更改鼠标上的图像

3 个答案: