onmouseover css 不工作

Question

我正在尝试添加具有鼠标悬停效果的图像，但我目前的努力没有显示任何内容。所以没有图像可以看到。我已经测试了图像路径，这是正确的：在我看来 image_tag(icons/admin.png) 它显示了图像。我做错了什么？

查看（既没有文字也没有 link，这就是我使用 "", "" 的原因，而且只有一个 "" 图像仍然不显示）：

<td><%= link_to("", "", title: "admin", class: "is-admin") if user_type_1? %></td>
# Also tried it without the if part, just to be sure, but I'm certain that part is true.

CSS:

.is-admin {
  background-image: image-url('icons/admin.png');
}
.is-admin:hover {
  background-image: image-url('icons/admin_2.png');
}

更新：我发现有一个尺寸问题：它显示尺寸为 0 的图像。所以我添加到 CSS:

.sizing {
  width: 15px;
  height: 15px;
}

在我看来：

<td><%= link_to("", "", title: "admin", class: "sizing is-admin") %></td>

然后，如果我查看检查器，图像的大小仍然显示为 0，而检查器 css 确认 15x15 的规格。我以前没见过：使用 Firefox 的检查器，你移动一个元素，它会给出一个尺寸，而如果你选择了屏幕右侧 css 中的元素，它会给出一个不同的尺寸.

Answer 1

将您的 css 属性值从 image-url 更改为 url 之后应该会起作用。

编辑

尝试使用

定义背景图片

display: block;

属性.

Answer 2

可能是你的td里面什么都没有的问题，尝试添加 .
如果我正确理解你的代码，它应该是这样的：

<td><%= link_to("&nbsp;", "#", title: "admin", class: "is-admin") if user_type_1? %></td>

这将导致

<td><a title="admin" class="is_admin" href="#">&nbsp;</a></td>

然后您的样式应该开始起作用了。

Answer 3

感谢大家的帮助，我找到了解决办法。在 CSS 中使用以下 .sizing 解决了它：

display: inline-block; 
background-size: cover;
width: 15px;
height: 15px;

onmouseover css 不工作

onmouseover with css not working

css

ruby

asset-pipeline

ruby-on-rails-4

编辑