问题在按钮的鼠标悬停 [英] Issue on mouse hover in button

问题描述

我使用Twitter的引导和使用上空盘旋时，我有一些奇怪的一个 BTN-初级按钮。

这是我的code：

 ＆LT; D​​IV CLASS =导航栏导航栏固定顶＆GT;
  ＆LT; D​​IV CLASS =Navbar的内部＆GT;
    ＆LT; D​​IV CLASS =容器＆GT;
        ＆LT; UL类=净值资产净值药丸＆GT;
      ＆LT;李班=主动＆GT;
        ＆LT; A HREF =＃＆GT;家庭和LT; / A＆GT;
      ＆LT; /李＆GT;
      ＆LT;立GT;＆LT; A HREF =＃＆GT; ...＆LT; / A＆GT;＆LT; /李＆GT;
      ＆LT;立GT;＆LT; A HREF =＃＆GT; ...＆LT; / A＆GT;＆LT; /李＆GT;
      ＆LT;立GT;＆LT; A HREF =＃类=BTN BTN-主要BTN-小＆GT;
                  ＆LT; I类=图标的用户图标白＆GT;＆LT; / I＆GT;登录
                  ＆所述; / A＆GT;
              ＆LT; /李＆GT;
    ＆LT; / UL＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

这是会发生什么：

之前

悬停

---

任何想法，为什么这可能发生？

解决方案

2的解决方案，

• 易于：拆下立的A HREF。优点：速度快，无需维护。缺点：如果你需要一个下拉不能做到这一点，可以打破设计


• preferrable：添加缺少的CSS类，支持李在BTN。

  .navbar .nav＆GT;李＆GT; a.btn {
显示：inline-block的;填充：4PX 10px的4PX;保证金：5像素5像素的6个像素;行family：宋体;
}.navbar .nav＆GT;李＆GT; a.btn小学，
.navbar .nav＆GT;李＆GT; a.btn小学：悬停{
   文字阴影：0 0 -1px RGBA（0，0，0，0.25）;
  颜色：#FFFFFF;
}
.navbar .nav＆GT;李＆GT; a.btn小学：积极{
   颜色：RGBA（255，255，255，0.75）;
} .navbar .nav＆GT;李＆GT; a..btn小学{
  背景颜色：＃0074cc;
  背景图片：-moz-线性渐变（顶部，＃0088cc，＃0055cc）;
  背景图片：-ms-线性渐变（顶部，＃0088cc，＃0055cc）;
  背景图像：-webkit梯度（线性，0 0，0 100％，从（＃0088cc）至（＃0055cc））;
  背景图片：-webkit-线性渐变（顶部，＃0088cc，＃0055cc）;
  背景图片：-o-线性渐变（顶部，＃0088cc，＃0055cc）;
  背景图片：线性渐变（顶部，＃0088cc，＃0055cc）;
  背景重复：重复 -  X;
  过滤：进程id：DXImageTransform.Microsoft.gradient（startColorstr ='＃0088cc'，endColorstr ='＃0055cc'，GradientType = 0）;
  边框颜色：＃0055cc＃0055cc＃003580;
  边框颜色：RGBA（0，0，0，0.1）RGBA（0，0，0，0.1）RGBA（0，0，0，0.25）;
  过滤：进程id：dximagetransform.microsoft.gradient（启用= FALSE）;
}
.navbar .nav＆GT;李＆GT; a.btn小学：悬停，
.navbar .nav＆GT;李＆GT; a.btn小学：活跃，
.navbar .nav＆GT;李＆GT; a.btn-primary.disabled，
.navbar .nav＆GT;李＆GT; a.btn小学[禁用] {
  背景颜色：＃0055cc;
}
.navbar .nav＆GT;李＆GT; a.btn小学：活跃，
.navbar .nav＆GT;李＆GT; a.btn-primary.active {
  背景颜色：＃004099 \\ 9;
}
 

I'm using Twitter Bootstrap and I'm having some weird using when hovering over a btn-primary button.

This is my code :

<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>

And this is what happens :

before

on hover

---

Any ideas why this could be happening?

解决方案

2 solutions,

• Easy : Remove the a href from the li. Pro: fast, no maintenance. Con : can't do this if you need a dropdown, can break design.
• Preferrable : add missing css classes to support btn within li.

.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;
}

这篇关于问题在按钮的鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！