Добавление эффекта наведения мыши для кнопки «Отправить» (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, при этом верхняя половина находится в выключенном состоянии, а нижняя - в стат. См. эту ссылку для получения дополнительной информации.