在 CSS 不起作用时更改鼠标悬停的图像答案

【问题标题】：Change image on mouse over with CSS not working在 CSS 不起作用时更改鼠标悬停的图像
【发布时间】：2015-06-19 13:46:52
【问题描述】：

使用 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>

【问题讨论】：

jsfiddle.net/soledar10/z1u2n2e2
你检查生成的锚元素了吗？它可能与使用 @user.twitter 作为 url 有关。你说它有价值，但价值是什么。
@user.twitter 有一个字符串作为值，但考虑到添加到 OP 的更新，我认为这可以正常工作。
好的。链接是否指向用户的 Twitter 页面或图片？
它指向用户的 twitter 页面（或基本上任何 url）。但见 Paulie_D 的回答；这似乎朝着正确的方向发展。

标签： html css ruby-on-rails ruby

【解决方案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');
}

&lt;a class="twitter" href="http://www.example.com"&gt;&lt;/a&gt;

【讨论】：

不幸的是使用background-image和url而不是image-url没有效果。
尝试添加display: inline-block
是的，现在它出现了。唯一的问题是只有部分图像显示（部分图像被截断），而我希望宽度和高度可以将图像拉伸到这些尺寸......

【解决方案2】：

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

【讨论】：

很遗憾，使用url 和no-repeat 代替image-url 无效。
设置背景尺寸：25px 25px;

【解决方案3】：

这是我的 CSS：

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

【讨论】：

不幸的是使用url和background-image而不是image-url没有效果。
检查图片网址（路径）和图片大小。
路径/图片正确；如果我只是使用image_tage 显示图像，它会正确显示。
img 标签是 html 标签，但是这里我们使用的 css 两者是不同的。
是的，但它证明路径是正确的，并且图像的大小不是 0x0，这是我理解你要问的吗？