将鼠标悬停效果添加到提交按钮（Rails 3）答案

【问题标题】：Adding Mouseover Effect to Submit Button (Rails 3)将鼠标悬停效果添加到提交按钮（Rails 3）
【发布时间】：2012-02-06 21:53:25
【问题描述】：

快速提问，我正在尝试向提交按钮添加翻转效果，但它似乎不起作用。我最初使用 CSS 来创建效果，但是当图像翻转时 CSS 会产生一点闪烁（我的猜测是加载翻转图像）。

这是按钮的代码：

<%= image_submit_tag ("sharebutton_up.jpg"), :mouseover => ("sharebutton_down.jpg")%>

关于如何修复此代码或创建翻转效果的不同方法的任何想法？

【问题讨论】：

标签： ruby-on-rails css ruby

【解决方案1】：

您应该使用图像精灵并使用背景位置更改它。

<%= image_submit_tag ("sharebutton.jpg"), :class => "submit_button" %>

然后在你的 CSS 中

.submit_button {
   width: 100px;
   height: 50px;
   background-image: url("sharebutton.jpg");
}

.submit_button:hover {
   background-position: 0 -100%;
 }

这假定图像为 100x100，上半部分为关闭状态，下半部分为开启状态。请参阅this link 了解更多信息。

【讨论】：

@BTHarris 看起来接受答案会给您带来所需的声誉。 :) stackoverflow.com/privileges/vote-up
嗨！我想知道当图像在表格中时如何正确地做同样的事情？因为如果我完全按照你说的做，图像根本不会被裁剪，我可以看到精灵的所有状态。我发现这样做的唯一方法是链接透明图像image_submit_tag ("empty_image.png")，其尺寸与精灵状态之一完全相同。