-->

问题就在按钮的鼠标悬停(Issue on mouse hover in button)

2019-09-19 04:51发布

我使用Twitter的引导和使用鼠标悬停在的时候我有一些奇怪的btn-primary按钮。

这是我的代码:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
        <ul class="nav nav-pills">
      <li class="active">
        <a href="#">Home</a>
      </li>
      <li><a href="#">...</a></li>
      <li><a href="#">...</a></li>
      <li><a href="#" class="btn btn-primary btn-small">
                  <i class="icon-user icon-white"></i> Log In
                  </a>
              </li>
    </ul>
    </div>
  </div>
</div>

这是发生了什么:

之前

悬停


任何想法,为什么这可能发生?

Answer 1:

2个解决方案,

  • 易:拆下立在href。 优点:速度快,无需维护。 缺点:如果你需要一个下拉菜单,可以打破设计无法做到这一点。
  • Preferrable:添加缺少的CSS类里内支持BTN。
 .navbar .nav > li > a.btn { display: inline-block; padding: 4px 10px 4px; margin: 5px 5px 6px; line-height: 18px; } .navbar .nav > li > a.btn-primary, .navbar .nav > li > a.btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; } .navbar .nav > li > a.btn-primary:active { color: rgba(255, 255, 255, 0.75); } .navbar .nav > li > a..btn-primary { background-color: #0074cc; background-image: -moz-linear-gradient(top, #0088cc, #0055cc); background-image: -ms-linear-gradient(top, #0088cc, #0055cc); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc)); background-image: -webkit-linear-gradient(top, #0088cc, #0055cc); background-image: -o-linear-gradient(top, #0088cc, #0055cc); background-image: linear-gradient(top, #0088cc, #0055cc); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc',endColorstr='#0055cc', GradientType=0); border-color: #0055cc #0055cc #003580; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } .navbar .nav > li > a.btn-primary:hover, .navbar .nav > li > a.btn-primary:active, .navbar .nav > li > a.btn-primary.disabled, .navbar .nav > li > a.btn-primary[disabled] { background-color: #0055cc; } .navbar .nav > li > a.btn-primary:active, .navbar .nav > li > a.btn-primary.active { background-color: #004099 \9; } 


文章来源: Issue on mouse hover in button