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

Rails: Change form submit image on hover using image_submit_tag

本文关键字：悬停 图像 提交 表单 tag 使用 image submit Rails 改变      更新时间：2023-09-26

什么是最优雅的'rails'的方式来实现悬停在一个图像上，提交一个表单与良好的跨浏览器功能?

对于一个图像，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。在rails中使用image_submit_tag最优雅的方法是什么?

这是我可以用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目录。

image_submit_tag生成一个带有SRC属性的标签。

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

你可以通过javascript修改源属性。

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