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

您应该使用类似于资产流水线方式的方法：

private string GetClaimValue(string claimType) {
    var identity = Context.User.Identity;
    var claim = identity.FindFirst(c => c.Type == claimType);

    if (claim == null)
        throw new InvalidOperationException($"No claim of type {claimType} found.");

    return claim.Value;
}

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

3 个答案: