Проблема при наведении мыши на кнопку

Question

Проблема при наведении мыши на кнопку

5

Я использую Twitter Bootstrap, и у меня есть странное использование при наведении курсора на кнопку 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>

И вот что происходит:

перед

при наведении

Любые идеи, почему это может происходить?

Dr.Kameleon 07 июль 2012, в 13:57

Источник

0

@mgraph Вы хотите полностью исключить класс btn ??? - Я не уверен, действительно ли вы поняли свою точку зрения (я использую ванильный Twitter Bootstrap ... с одним или двумя изменениями ... вот и все)
Dr.Kameleon 07 июль 2012, в 11:33
0

Возможный дубликат загрузчика Twitter, стиль кнопок наведения?
Serpentine Cougar 19 авг. 2016, в 22:41

Теги:

twitter-bootstrap

html

html5

css3

button

1 ответ

Ещё вопросы

@mgraph Вы хотите полностью исключить класс btn ??? - Я не уверен, действительно ли вы поняли свою точку зрения (я использую ванильный Twitter Bootstrap ... с одним или двумя изменениями ... вот и все)
Возможный дубликат загрузчика Twitter, стиль кнопок наведения?

maxmax · Accepted Answer · 2012-07-07T13-14-00.000Z

2 решения,

Легко: удалите href из li. Pro: быстрый, без обслуживания. Con: не может это сделать, если вам нужно выпадающее меню, может нарушить дизайн.
Предпочитаемый: добавьте отсутствующие классы CSS для поддержки btn внутри 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;
}

Это отличный ответ! Большое спасибо. Задача решена. :-)