Question

我有一个链接的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”。我该如何解决这个问题？在此先感谢您的帮助！

Answer 1

您可以在不修改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 %>

Answer 2

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

<%= 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/

Answer 3

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

onmouseover for link_to image_tag

3 个答案: