栏杆4:如何使用悬停创建图像链接

Question

我有一个Rails 4.0.1应用程序，它在主页上显示了一组图像链接。Rails从Industry模型中获取图像名称。每个图像都应该在鼠标悬停时显示一个悬停图像。

我试过这个：

<% @industries.each_with_index do |i,n| %>
    <li class="col-md-2 col-md-offset-1">
         <%= link_to image_tag(i.img_full, alt: i.name, class: 'industry_thumb', mouseover: i.img_full_mo), companies_path(industry: i.name) %>
    </li>
<% end %>

然而，这导致了这个HTML:

<li class="col-md-2">
    <a href="/companies?industry=Personalberatung">
         <img alt="Personalberatung" class="industry_thumb" mouseover="branchen_personalber_mo.png" src="/assets/branchen_personalber.png">
    </a>
</li>

当我期待鼠标悬停时：像这里描述的那样工作：http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/image_tag

我没有发现太多关于这个问题的文章，这就是为什么我猜测有一种使用CSS的替代方法。然而，如果我想动态生成图像链接，我如何使用CSS实现同样的效果？不幸的是，将默认图像和悬停图像移动到一个图像中，并使用类似的东西：

 .button-class {
   border: 0;
   background: url('../assets/images/button.png') no-repeat 0 0px;
 }
 .button-class:hover {
    background: url('../assets/images/button.png') no-repeat 0 20px;
 }

在这种情况下是不可能的。除非在资源期间有一种自动组合两个图像的方法：预编译？

非常感谢你的帮助！

Answer 1

image_tag(class_door(student_class), onMouseover: "this.src='/assets/open_door.png';", onMouseout: "this.src='/assets/closed_door.png'" )

我有上面的代码正在为我工作，注意class_door（student_class）是我的应用程序中的一个助手

鼠标悬停方法是onMouseover:而不是mouseover:

Answer 2

试试这个。

.col-md-2 a img:hover{
    /*Your hover values should be here*/
}

希望这能有所帮助。

Answer 3

您应该使用这样的东西来与资产管道方式保持一致：

image_tag(class_door(student_class), onMouseover: "this.src='#{image_url("/assets/open_door.png")}';", onMouseout: "this.src='#{image_url("/assets/closed_door.png")}'" )