向提交按鈕添加鼠標懸停效果（Rails 3）

快速問題，我試圖向提交按鈕添加滾動效果，但它似乎不工作。我最初使用CSS來創建效果，但當圖像翻轉時（我的猜測來自加載翻轉圖像），CSS會創建一些閃爍。向提交按鈕添加鼠標懸停效果（Rails 3）

繼承人按鈕的代碼：

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

關於如何解決此問題的代碼，或以不同的方式來創建過渡效果的任何想法？

來源

2012-02-06 BTHarris

您應該使用圖像精靈並使用背景位置對其進行更改。

<%= 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。

來源

2012-02-06 22:02:51 Gazler

完美。謝謝！我會+1，如果我有足夠的代表 – BTHarris 2012-02-06 22:50:40

@BTHarris看起來像接受一個答案給了你所需的聲望。 :) http://stackoverflow.com/privileges/vote-up – Gazler 2012-02-06 22:54:12

嗨！我想知道如何在圖像在表格中時正確地做同樣的事情？因爲如果我完全按照你說的去做，圖像根本不會被裁剪，我可以看到精靈的所有狀態。我發現這樣做的唯一方法是將透明圖像'image_submit_tag（「empty_image.png」）'與精靈狀態的精確維度鏈接起來。 – 2013-07-03 16:27:42

向提交按鈕添加鼠標懸停效果（Rails 3）

回答

相關問題