Question

默认的Twitter Bootstrap 2按钮样式使按钮在悬停时变暗。据我所知，这是通过在按钮上设置一个浅色渐变覆盖来实现的，并使这个覆盖在悬停时移动到-15px，这使按钮变暗。

我想知道，如果我可以进行一般性更改，使按钮在悬停时更亮，请将相反的体验说成默认值？

注意：在@btnBackgroundHighlight中切换@btnBackground和variables.less（我使用较少的引导程序）最终使按钮在下部比上部轻（不悬停的时候）。这给人一种按钮以某种方式按下/禁用的感觉。我希望按钮的上半部分始终最直。

Answer 1

默认按钮具有从@btnBackground（顶部）到（@btnBackgroundHighlight）的渐变，并将悬停颜色设置为@btnBackgroundHighlight。切换颜色无助于导致光线悬停始终具有从暗到亮的渐变，反之亦然。

解决方案1 ：

生成一个按钮：http://twitterbootstrapbuttons.w3masters.nl/选择第一个灯光变体。手动切换代码的渐变颜色。不要忘记通过添加：background-position: 0 15px;

将覆盖悬停在您的CSS中

解决方案2 ：

通过添加：

，以更少的代码生成代码

.buttonBackgroundReverse(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
  .gradientBar(@startColor, @endColor, @textColor, @textShadow);
  *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  .reset-filter();

  // in these cases the gradient won't cover the background, so we override
  &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
    color: @textColor;
    background-color: @startColor;
    *background-color: darken(@startColor, 5%);
  }
  &:hover, &:focus {background-position: 0 15px;}

  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
  &:active,
  &.active {
    background-color: darken(@startColor, 10%) e("\9");
  }
}

@darkcolor: #46a546;
@lightcolor : lighten(#46a546, 30%);
.btn-light 
{
.buttonBackgroundReverse(@lightcolor,@darkcolor);
}

使用@darkcolor设置按钮颜色也可以根据需要更改@lightcolor的百分比。有关示例，请参阅http://bootply.com/65731。

Twitter引导突出显示悬停按钮

1 个答案: