css - onmouseover 与 css 不工作

Question

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

查看(没有文本也没有链接，这就是为什么我使用 "", ""，但也只有一个 "" 图像仍然没有'不显示):

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

属性(property)。