【问题标题】:Adding Mouseover Effect to Submit Button (Rails 3)将鼠标悬停效果添加到提交按钮(Rails 3)
【发布时间】:2012-02-06 21:53:25
【问题描述】:

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

这是按钮的代码:

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

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

【问题讨论】:

    标签: ruby-on-rails css ruby


    【解决方案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 了解更多信息。

    【讨论】:

    • @BTHarris 看起来接受答案会给您带来所需的声誉。 :) stackoverflow.com/privileges/vote-up
    • 嗨!我想知道当图像在表格中时如何正确地做同样的事情?因为如果我完全按照你说的做,图像根本不会被裁剪,我可以看到精灵的所有状态。我发现这样做的唯一方法是链接透明图像image_submit_tag ("empty_image.png"),其尺寸与精灵状态之一完全相同。
    猜你喜欢
    • 1970-01-01
    • 2019-01-20
    • 1970-01-01
    • 1970-01-01
    • 2013-01-17
    • 1970-01-01
    • 2013-06-15
    • 2011-06-30
    • 1970-01-01
    相关资源
    最近更新 更多