Twitter自举，按钮悬停样式？ [英] Twitter bootstrap, buttons hover style?

问题描述

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

这里是悬停后：

>

这里是按钮的haml：

  = link_to'＃'，{：class =>'tour_btn btn btn-large btn-primary'，：style =>'margin-left：10px; width：105px;'} do 
％h3 
参观游览
  

：

  .tour_btn {
 #gradient> （＃F98C51，＃a35b35）; 
} 
  

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

解决方案

Twitter Bootstrap动画 background-position 在悬停时与转换（因为背景梯度不能有转换）。在你的情况下发生的是，背景梯度正在向上移动与 background-position：-15px ，你会看到底下的背景颜色。 >

要修复此问题，请将鼠标悬停在 background-color 下面的按钮渐变底部颜色：

  .tour_btn {
 #gradient> （＃F98C51，＃a35b35）; 
&：hover {background-color：＃a35b35} 
} 
  

I am trying to use gradient style for my buttons, but, I have a problem with hover style, Here is the button before hover:

And here is after hover:

Here is haml of button:

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

LESS:

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

Any idea please ? is it possible to specify another gradient style for hover state ? Or at least, not to change button when hover ?

解决方案

Twitter Bootstrap animates the background-position on hover with a transition (since background-gradients cant have a transition). What is happening in your case, is the background-gradient is getting shifted up with background-position: -15px, and you are seeing the background-color underneath.

To fix this set your background-color to the bottom color of your button gradient on hover:

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

这篇关于Twitter自举，按钮悬停样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！