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

Question

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

下面是按钮的代码：

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

有关如何修复此代码的任何想法，或创建翻转效果的其他方法？

Answer 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。