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;

属性。

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无法正常工作

3 个答案:

修改