Rails4：如何使用悬停创建图像链接？答案

【问题标题】：Rails4: How to create Image Links with Hover?Rails4：如何使用悬停创建图像链接？
【发布时间】：2013-12-04 11:26:18
【问题描述】：

我有一个 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>

当我期待 mouseover: 像这里描述的那样工作时： 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;
 }

在这种情况下是不可能的。除非在 assets:precompile 期间有一种自动组合两个图像的方法？

非常感谢您的帮助！

【问题讨论】：

标签： html css ruby-on-rails hover ruby-on-rails-4

【解决方案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:

【讨论】：

这行得通，谢谢。但是，不应该有一种符合apidock.com/rails/ActionView/Helpers/AssetTagHelper/image_tag的方法吗？
好吧，我不知道为什么没有抱怨，也许其他人在代码之外使用 javascript 来做鼠标悬停，但对我来说，我尝试点击相同的链接，但它不起作用，然后搜索后我找到了onMouseover，所以我试了一下。如果您认为我的解决方案是您可以接受的答案

【解决方案2】：

试试这个。

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

希望这会有所帮助。

【讨论】：

【解决方案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")}'" )

【讨论】：