带有CSS的鼠标悬停不起作用答案

【问题标题】：onmouseover with css not working带有CSS的鼠标悬停不起作用
【发布时间】：2023-04-08 05:22:02
【问题描述】：

我正在尝试添加具有鼠标悬停效果的图像，但我目前的工作没有显示任何内容。所以没有图像可以看到。我已经测试了图像路径，这是正确的：在我看来 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 中选择了元素，它会给你一个不同的大小。

【问题讨论】：

尝试只使用background-image: url('icons/admin.png'); 而不是image-url。
谢谢，我试过了，但不幸的是没有任何作用。
非悬停图像是否有效？因为我可能知道如何解决这个问题。
不，根本没有图像。如果我不使用 css 并且在我看来使用 image_tag(icons/admin.png) 代替，则只有一个图像。样式表中的其他 css 有效，所以这也不是原因。
通过测试是否通过更改不同的 CSS 属性（如背景颜色）触发了鼠标悬停效果来隔离问题。

标签： css ruby ruby-on-rails-4 asset-pipeline

【解决方案1】：

将您的 css 属性值从 image-url 更改为 url 之后应该可以工作。

编辑

尝试用

定义你的背景图片

display: block;

财产。

【讨论】：

凯。没看到评论。
我在 css is-admin 和 is-admin:hover 样式中添加了 display: block;，但这并没有什么区别。
将您的班级名称从 .is-admin 更改为 .is_admin 工作吗？
很遗憾，这没有帮助
随着您的更新，您尝试了宽度和高度，添加背景大小如何：15px；无法用我的手机运行 ruby，所以我只能考虑结果。对于任何误导性信息，我深表歉意。

【解决方案2】：

你的td里面可能没有问题，尝试添加&nbsp;。
如果我正确理解您的代码，它应该如下所示：

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

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

【讨论】：

如果我这样做，它会显示&nbsp，当我将鼠标移到该文本上时，它会改变颜色。但是图像仍然没有显示。或者更好地说，它们的大小为 0（请参阅帖子中添加的更新）。
`&nbsp\` 有什么不同吗？

【解决方案3】：

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

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

【讨论】：