我试图使用渐变样式为我的按钮,但是,我有一个悬停的风格的问题,
这是悬停前的按钮:
这是悬停前的按钮:
这是在悬停后:
这是按钮的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 } }