Не изменять CSS при наведении над кнопкой бутстраповской

Я использую btn-group так: http://jsfiddle.net/dy9uH/34/Не изменять CSS при наведении над кнопкой бутстраповской

Я не хочу, чтобы мои пользователи думать, что кнопка слева щелкать-состоянии, но не нравится, как когда я добавляю класс disabled. Как я могу убедиться, что ничего не происходит, когда пользователь наводит курсор на левую кнопку? Я бы предпочел не редактировать bootstrap.css, потому что у меня есть другие кнопки, которые используют класс .btn-group, который мне нужно нормально работать.

источник

2013-02-19 Xecure

Я думаю, что единственное решение - это преодолеть стили бутстрапа с вашими пользовательскими изменениями.

Добавить пользовательский класс в btn ех: special
Определить стиль переопределения следующим образом в пользовательском CSS файле
Включить пользовательский файл на странице

Css:

.btn.special { 
    background-color: #F5F5F5; 
    color: #333333; 
    background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6); 
    text-decoration: none; 
    background-position: 0; 
    transition: none; 
}

Демонстрация: Fiddle

источник

2013-02-19 03:19:25

Это работает очень хорошо. Одна небольшая проблема, которую я испытываю, заключается в том, что при нажатии кнопки CSS изменяется и переходит в стиль ': active' или': focus' css. Я немного изменил CSS, чтобы противостоять этому, но он все равно не работает: http://jsfiddle.net/dy9uH/14/ Любая идея, почему? – Xecure

Попробуйте эту скрипку http://jsfiddle.net/dy9uH/16/ (Добавлено 'box-shadow: none;') –

Но это меняет стиль кнопки, если она не ': активна' или парит. Любые другие идеи? – Xecure

-2

Ну, вы можете добавить класс к этой конкретной кнопке, чтобы он не врезался с другими и не переписывал отключенный класс, это было бы самым простым способом.

источник

2013-02-19 02:48:15

Это не отвечает на вопрос. – lanoxx

Я собираюсь предположить, что вы хотите использовать отключенный, так что кнопка фактически отключена. Вам нужно будет переопределить некоторые Bootstrap

Я хотел бы сделать следующее

HTML

<div class="btn-group"> 
    <button class="btn special" disabled>I'm Special</button> 
    <button class="btn dropdown-toggle" data-toggle="dropdown"> 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
    <!-- dropdown menu links --> 
    </ul> 
</div>

CSS

.special, 
.special.disabled, 
.special[disabled] 
.special.disabled:hover, 
.special[disabled]:hover, 
.special.disabled:focus, 
.special[disabled]:focus { 
    display: inline-block; 
    *display: inline; 
    padding: 4px 12px; 
    margin-bottom: 0; 
    *margin-left: .3em; 
    font-size: 14px; 
    line-height: 20px; 
    color: #333333; 
    text-align: center; 
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 
    vertical-align: middle; 
    cursor: pointer; 
    background-color: #f5f5f5; 
    *background-color: #e6e6e6; 
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6) !important; 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)) !important; 
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6) !important; 
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6) !important; 
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6) !important; 
    background-repeat: repeat-x !important; 
    opacity: 1 !important; 
    filter: alpha(opacity=100) !important; 
    background-position: 0 0; 
    -webkit-transition:none; 
    -moz-transition:none; 
     -o-transition: none; 
      transition: none; 
    border: 1px solid #cccccc; 
    *border: 0; 
    border-color: #e6e6e6 #e6e6e6 #bfbfbf; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    border-bottom-color: #b3b3b3; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
      border-radius: 4px; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); 
    *zoom: 1; 
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 
}

Обратите внимание на disabled селекторы.

HOWEVER это никому не удивит, что это частично поддерживается в IE!

Fiddle

источник

2013-02-19 03:32:54

Не изменять CSS при наведении над кнопкой бутстраповской

ответ

Смежные вопросы