Html Twitter 引导程序，按钮悬停样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12501224/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap, buttons hover style?
提问by simo
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:
这是按钮的haml：
= 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 ?
有什么想法吗？是否可以为悬停状态指定另一种渐变样式？或者至少，不要在悬停时更改按钮？
回答by Kostia
Twitter Bootstrap animates the background-positionon 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.
Twitter Bootstrapbackground-position使用过渡动画悬停（因为背景渐变不能有过渡）。在您的情况下发生的情况是，背景渐变正在向上移动background-position: -15px，并且您看到下面的背景颜色。
To fix this set your background-colorto the bottom color of your button gradient on hover:
要解决此问题background-color，请将悬停时设置为按钮渐变的底部颜色：
.tour_btn {
#gradient > .vertical(#F98C51, #a35b35);
&:hover { background-color: #a35b35 }
}
回答by codef0rmer
If you have a set a background image for a button, the background shifts up by 15pxon hover. You can set it to 0px.
如果您为按钮设置了背景图像，则背景会15px在悬停时向上移动。您可以将其设置为0px.
.tour_btn:hover {
background-position: 0px !important;
}
回答by Bass Jobsen
When using custom css instead of LESS to style your buttons, try http://twitterbootstrapbuttons.w3masters.nl/?color=%23F1874E. You will get all css for your custom buttons including hover effect and disabled / active states.
当使用自定义 css 而不是 LESS 来设置按钮样式时，请尝试http://twitterbootstrapbuttons.w3masters.nl/?color=%23F1874E。您将获得自定义按钮的所有 css，包括悬停效果和禁用/活动状态。
For the button above you could use possible:
对于上面的按钮，您可以使用可能：
.btn-custom-lighten.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-custom-lighten {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #f29461;
background-image: -moz-linear-gradient(top, #f1874e, #f5a77d);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f1874e), to(#f5a77d));
background-image: -webkit-linear-gradient(top, #f1874e, #f5a77d);
background-image: -o-linear-gradient(top, #f1874e, #f5a77d);
background-image: linear-gradient(to bottom, #f1874e, #f5a77d);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1874e', endColorstr='#fff5a77d', GradientType=0);
border-color: #f5a77d #f5a77d #ef7736;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #f5a77d;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-custom-lighten:hover,
.btn-custom-lighten:focus,
.btn-custom-lighten:active,
.btn-custom-lighten.active,
.btn-custom-lighten.disabled,
.btn-custom-lighten[disabled] {
color: #ffffff;
background-color: #f5a77d;
*background-color: #f39766;
}
.btn-custom-lighten:active,
.btn-custom-lighten.active {
background-color: #f1874e ;
}
usage:
用法：
<button class="btn btn-custom-lighten btn-large">Your button</button>
Add the CSS below /after your bootstrap(.min).css Using this css let's you custom button effects work in most browsers.
在你的 bootstrap(.min).css 之后添加下面的 CSS 使用这个 css 让你自定义按钮效果在大多数浏览器中工作。
回答by hajpoj
you can specify what you want the CSS to be when a button is hovered with the css :hover property.
当按钮悬停在 css :hover 属性上时，您可以指定您想要的 CSS。
So in your case you will want to do something like
所以在你的情况下，你会想要做类似的事情
.tour_btn:hover {
/* your custom css */
}
Using chrome developer tools you should be able to see what kind of gradients are currently being applied by bootstrap and then override them with your css.
使用 chrome 开发人员工具，您应该能够看到引导程序当前正在应用什么样的渐变，然后用您的 css 覆盖它们。
回答by ChaitanyaChowdary Divi
.tour_btn:hover {
background-color: #a35b35;
background-position: 30px 30px;
}
i found this solution you can try this . it works with simple code
我找到了这个解决方案，你可以试试这个。它适用于简单的代码
