Изменение цвета при наведении группы кнопок Bootstrap

Я использую группу кнопок Bootstrap как серию флажков.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="checkbox"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>

Рабочий пример см. в разделе http://getbootstrap.com/javascript/#buttons Checkbox.

Когда вы наводите курсор на неотмеченную кнопку, она меняется на тот же цвет, что и отмеченная кнопка. Если вы затем нажмете кнопку, она не изменит цвет, потому что она уже имеет тот же цвет, что и отмеченная кнопка. Поэтому вам нужно отвести мышь от кнопки, чтобы убедиться, что вы на самом деле нажали ее правильно. Очевидно, аналогичная проблема возникает при переходе из проверенного в непроверенное состояние. Я думаю, что это немного сбивает с толку моих пользователей. Есть ли способ заставить кнопку Bootstrap не менять цвет при наведении?


twitter-bootstrap twitter-bootstrap-3
person Giles Roberts    schedule 19.12.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

На самом деле у вас есть разница между кнопками :hover и :active, вы можете увидеть небольшую тень на кнопке.

Вы можете усилить эту тень, используя этот код (который будет работать для каждой кнопки, независимо от их цвета):

.btn:active,
.btn.active {
    -webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

Результат:
введите здесь описание изображения

person zessx    schedule 19.12.2013
comment
Спасибо. С визуальной точки зрения мне не очень нравился стиль тени блока, поэтому в итоге я объединил ваш ответ и мой и изменил атрибуты background-color и border-color на активных кнопках для этой конкретной страницы. - person Giles Roberts; 19.12.2013

arrow_upward
1
arrow_downward

В качестве обходного пути я в настоящее время переопределяю цвета при наведении на страницу, на которой я использую группу кнопок, чтобы пользователи могли, по крайней мере, видеть, что наведение - это действие, отличное от выбора кнопки.

.btn-primary:hover,
.btn-primary:focus {
  color: #ffffff;
  background-color: #428bff;
  border-color: #357ebd;
}
person Giles Roberts    schedule 19.12.2013