onmouseover for link_to image_tag

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标记).根据你所写的内容,你有一个图像"硬编码"到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/