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

Question

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

对于图像,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.使用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');
});