Rails：如何使用image_submit_tag在鼠标悬停时更改表单提交图像？

Question

如何用最优雅的“rails”方法实现一个在图片上悬停并提交表单的功能，同时保证良好的跨浏览器功能？

对于单独的图片，image_tag 可以很好地工作：

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

针对image_submit_tag，:mouseover无法正常工作。

我想到的一种方式是使用带有css的html.erb文件，但它存在跨浏览器问题：

<%= 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。在Rails中，使用image_submit_tag的最优雅方式是什么？

- apechai

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目录。

- apechai

Answer 2

image_submit_tag 会生成一个带有 src 属性的 img 标签。

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

你可以通过JavaScript更改该源属性。

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

- Jagira

---

我尝试了这个，但当我将鼠标悬停在上面时，它显示文本“提交查询”。 - apechai