Rails：使用image_submit_tag在悬停时更改表单提交图像

Question

在提交具有良好跨浏览器功能的表单的图像上实现悬停的最优雅的“轨道”方式是什么？

对于图像，image_tag工作正常：

<%= image_tag("mouse.png", :mouseover => "/images/mouse_over.png") %>

对于image_submit_tag，：mouseover不起作用。

我想到的一种方法是将html.erb文件与css一起使用，但它有跨浏览器问题：

<%= image_submit_tag "", :class => "icon" %>

CSS：

.icon { background-image: url('images/mouse.png')}
.icon:hover { background-image: url('images/mouse_over.png')}

在rails之外，可以使用javascript或css。使用image_submit_tag在rails中执行此操作的最优雅方法是什么？

Answer 1

这是我用image_submit_tag解决的最简单方法：

<%= image_submit_tag "mouse.png", 
:onmouseover => "this.src='assets/mouse_over.png'", 
:onmouseout => "this.src='/assets/mouse.png'"%>

image_submit_Tag和image_tag以不同方式处理：mouseover选项。这个image_tag：

<%= image_tag "mouse.png", :mouseover => "mouse_over.png" %>

将采用：mouseover选项并将其转换为：

<img src="/assets/mouse.png" 
onmouseover="this.src='/assets/mouse_over.png'" 
onmouseout="this.src='/assets/mouse.png'" alt="mouse">

但是image_submit_tag：

<%= image_submit_tag "mouse.png", :mouseover => "mouse_over.png" %>

将采用：mouseover选项，如下所示：

<input type="image" src="/assets/mouse.png" mouseover="mouse_over.png">

因此，在使用image_submit_tag时，必须明确指定onmouseover，onmouseout和assets目录。

Answer 2

image_submit_tag生成带有src属性的标记。

<input type='submit' src='image.png'></input>

您可以通过javascript更改该源属性。

$("input.icon").hover(function(){
   $(this).attr("src", 'images/mouse_over.png');
});