4

我有一个链接的 image_tag，我想在鼠标悬停时更改图像。我认为以下方法会起作用，但图像没有在鼠标悬停时打开：

<%= link_to image_tag("new_step.png"),new_project_step_path(@project), :class=> "newStep", :onmouseover => "new_step_highlighted.png"%>

我也尝试编辑 css，但不幸的是这也不起作用：

.newStep{
    background: url('../assets/new_step_highlighted.png');
}

.newStep:hover{
    background: url('../assets/new_step_highlighted.png');
}

对于这两种情况，只出现图像“new_step.png”。我将如何解决这个问题？在此先感谢您的帮助！

4

3 回答 3

9

您可以在不修改 CSS 的情况下使用更少的代码来做到这一点：

<%= link_to some_route_path do
    image_tag("find.png", onmouseover: "this.src='#{asset_path('find_sel.png')}'", onmouseout: "this.src='#{asset_path('find.png')}'")
end %>
于 2014-03-06T19:05:06.340 回答
8

仅使用 css，您需要将两个图像都用作link_to标签（实际上是a标签）的背景属性。使用您所写的内容，您将一个图像“硬编码”到 dom 中，image_tag并且您尝试更改链接的背景属性，原因newStep实际上是link_to类。

<%= link_to "Text", new_project_step_path(@project), :class => "newStep" %>

然后是css（顺便说一句，您不需要在资产文件夹的路径前添加“..”）：

.newStep {
    display: inline-block;
    width: your-image-width;
    height: your-image-height;
    background: url('/assets/new_step.png');
}

.newStep:hover {
    background: url('/assets/new_step_highlighted.png');
}

这里的小提琴：http: //jsfiddle.net/km6Sp/

于 2013-02-01T18:19:35.433 回答
0

事实证明，斯巴达的反应是正确的，只是我的图像路径实际上只是“/assets/new_step.png”。由于我的 CSS 文件存在问题，图像没有出现。

于 2013-02-04T03:04:26.887 回答