ruby-on-rails - 向提交按钮添加鼠标悬停效果 (Rails 3)

标签 ruby-on-rails css ruby

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

按钮代码如下:

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

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

最佳答案

你应该使用图像 Sprite 并使用背景位置改变它。

<%= 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获取更多信息。

关于ruby-on-rails - 向提交按钮添加鼠标悬停效果 (Rails 3),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9167846/

相关文章:

sql - 从连接表中删除事件记录条目而不删除原始记录

ruby-on-rails - 基于Ajax的微博评论(Ruby on Rails)

html - 仅为 ul 的第一个和第二个子元素定义网格 fr

html - 防止 'jumpy' 带有提示(适合网格)文本的元素上的 CSS 转换

css - CSS 属性中的 `auto` 值是什么意思。

ruby-on-rails - 如何从 Rails 中的远程服务器数据库中提取数据?

ruby - 如何创建/编辑/配置多个 PayPal 标准支付按钮?

ruby-on-rails - 在 Snow Leopard 上安装 Rails 3.1 和 Postgresql

ruby-on-rails - 如何将我的 bool 输出更改为 ruby​​ 中的字符串值

ruby-on-rails - 项目 :Class 的未定义方法 `model_name'