html – Twitter bootstrap,按钮悬停样式？

发布时间：2020-12-14 21:37:56 所属栏目：资源来源：网络整理

导读：我试图使用渐变样式为我的按钮，但是，我有一个悬停的风格的问题，这是悬停前的按钮：这是在悬停后：这是按钮的haml： = link_to '#',{:class='tour_btn btn btn-large btn-primary',:style='margin-left: 10px; width: 105px;'} do %h3 Take a Tour 减：

我试图使用渐变样式为我的按钮，但是，我有一个悬停的风格的问题，
这是悬停前的按钮：

这是在悬停后：

这是按钮的haml：

= link_to '#',{:class=>'tour_btn btn btn-large btn-primary',:style=>'margin-left: 10px; width: 105px;'} do
        %h3
          Take a Tour

减：

.tour_btn {
    #gradient > .vertical(#F98C51,#a35b35);
}

有什么想法吗？是否可以为悬停状态指定另一个渐变样式？
还是至少在悬停时不要更改按钮？

解决方法

Twitter Bootstrap通过转换动画悬停的背景位置(因为背景渐变不能有转换)。在你的情况下发生了什么，背景渐变是否随着背景位置递减：-15px，你在下面看到背景颜色。

要修复此设置您的背景颜色到您的按钮渐变的底部颜色悬停：

.tour_btn {
    #gradient > .vertical(#F98C51,#a35b35);
    &:hover { background-color: #a35b35 }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!