送信ボタンにマウスオーバーエフェクトを追加する（Rails 3）

Question

簡単な質問は、送信ボタンにロールオーバーエフェクトを追加しようとしていますが、動作していないようです。私はもともとCSSを使ってエフェクトを作成していましたが、画像がロールオーバーされたときにCSSが少しちらつきを覚えました（私の推測はロールオーバー画像のロードによるものです）。

HERESにボタンのコード：

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

このコード、またはロールオーバー効果を作成するための別の方法を修正する方法上の任意のアイデア？

Answer 1

イメージスプライトを使用し、背景の位置を使用して変更する必要があります。あなたのCSSで次に

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

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

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

これは、上半分がオフ状態であることと、下半分が上STATことで、100×100の画像を想定しています。詳細については、this linkを参照してください。