Rails：悬停时更改图像？答案

【问题标题】：Rails: Change image on hover?Rails：悬停时更改图像？
【发布时间】：2015-02-17 13:25:57
【问题描述】：

也许是一个简单的问题，但是当鼠标悬停在图像（图像不是链接，只是图像）上时想要更改图像时，Rails 中有什么好的做法？

【问题讨论】：

有多种可能的方式，从使用 CSS :hover 选择器到 Javascript。不过，它们都不涉及您的后端（Rails）——这一切都发生在浏览器的客户端。
我认为当鼠标悬停在图像上时，您应该只更改图像 url，您应该在图像的 data-attr 中添加第二个图像 url 并更改 hovring 上的 url
@Ansar 你能举出一个粗略的例子来说明你将如何做到这一点吗？
用 css 比用 javascript 来做要好得多。
不一定，这是一个复杂的问题。请参阅stackoverflow.com/questions/492809/… 和stackoverflow.com/questions/17090853/… 简短版本可能是“如果图像是内容（例如有人上传），则使用 img 标签，如果只是为了网站的外观和感觉，则使用 css”

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

【解决方案1】：

有两种方法可以做到这一点：

1) 使用 img 标签，并使用 javascript 更改悬停时的 img src 属性

优点 - 在不使用样式表的其他情况下，图像会打印出来或显示
缺点 - 需要 javascript，这会增加系统的复杂性、减慢页面速度，并且在某些情况下可能无法工作。如果某些内容被重新加载，例如使用 ajax，您需要确保重新应用事件或其他方式。

2) 使用 div（或其他非 img 元素），并通过在您的 css 中设置的 background 属性显示图像。然后，您可以添加额外的 :hover 规则以在悬停时显示备用图像。

优点 - 一切都用 css 完成。即使在部分重新加载页面后也能快速且保证工作。
缺点 - 不会打印，除非您也使用该样式表进行打印。如果图像 src 是从您的数据库驱动的，则更难做到。

注 1) - 您不能使用 css 更改 img 标签的背景的“混合”方法，因为图像标签的背景位于图像后面，因此无法看到：您会改变图像背后的“层”

注 2) - 如果您使用带有 img 标签的 js，请将备用图像路径放在 data 属性中，例如 "data-hover-src="/images/pic2.png"。然后你可以用一个简单的标准javascript函数来管理它。

注 3) - 如果图像 src 是数据库生成的（例如，它是用户上传的图像），你可以仍然通过 css 来完成，但你需要通过放置来完成将 css 转换为元素上的样式属性。

决定走哪条路有点复杂，但可以归结为“如果图像是内容，例如用户已上传，则使用 img 标签。如果图像是外观的一部分你的网站，使用css”。但是，您可以在任何一种情况下使用任何一种方法，但需要做一些工作。

另请参阅：When to use IMG vs. CSS background-image? 和 Div Background Image or Using IMG Tag

【讨论】：

【解决方案2】：

试试这个：

HTML：

<img id="demo_image" src="smiley.gif" alt="Smiley face" width="42" height="42" onmouseover="changeImage(this)" onmouseout="changeImage(this)" data-image2="http://mw2.google.com/mw-panoramio/photos/small/17287086.jpg">

JS：

function changeImage(img) {
    img = $(img);
   var in_url = img.attr('src'),
     out_url =  img.attr('data-image2');
   img.attr('src', out_url).attr('data-image2', in_url);
}

http://jsfiddle.net/X3zEq/9/

【讨论】：

您可以通过 css 执行此操作，也可以为悬停在图像上定义不同的 css

【解决方案3】：

假设这是你的a 标签，添加一个类和一个id（如果需要的话）

<%= image_tag "xyz.jpg", class: "change-image" %>

现在在 js 文件中

$(".change-image").hover(function(){
  $(this).attr("src") = // url of the new image
});

【讨论】：

【解决方案4】：

让我们有一个图像

 <%= image_tag "image.jpg", id: "img" %>

现在在 js 中使用 jQuery

$(function() {
  $("#img")
    .mouseover(function() { 
       var src = $(this).attr("src").replace("image.jpg", "over.jpg");
       $(this).attr("src", src);
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over.jpg", "image.jpg");
       $(this).attr("src", src);

    });
 });

【讨论】：