Задать вопрос
@gcj

Как перебить .class:hover background-color?

Приветствую!
Нужно ОТМЕНИТЬ цвет элемента при наведении так, чтобы цвета самих элементов не менялись.
Допустим, имеются 3 кнопки с background-color: #000;
Bootstrap по умолчанию присваивает этим кнопка определенный цвет. Нужно отменить это свойство, причем без редактирования самого фреймворка, т.е. вариант удалить строчку из бутстрап.css не канает. :)
  • Вопрос задан
  • 2761 просмотр
Подписаться 2 Оценить Комментировать
Решения вопроса 1
monochromer
@monochromer
DIVeloper
Если устраивает вложенность элементов, то можно сделать такой пятиколесный велосипед:
jsfiddle.net/q32hffm1/2
<!-- обычная кнопка -->
<a href="#" class="btn">
    <span class="btn__inner">Button</span>
</a>

<!-- кнопка с отменой цвета -->
<a href="#" class="btn btn_disabled">
    <span class="btn__inner">Button</span>
</a>

.btn {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    text-decoration: none;
    color: #ccc;
    background: #333;
}

    .btn__inner {
        display: block;        
        padding: 15px 20px;
        background: inherit;
    }

    .btn:hover .btn__inner {
        background: #575757;
    }

    .btn_disabled:hover .btn__inner {
        background: inherit;
    }
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
Tanya_S
@Tanya_S
Практикуюсь в верстке, SEO, работе с CMS.
А добавить в конец строки с необходимым стилем !imortant?
Ответ написан
aliencash
@aliencash
Партизан
background-color: transparent !important;
Ответ написан
Igor-Maf
@Igor-Maf
Senior Front End developer
<button class="btn btn-default btn--reset">Button</button>

.btn--reset {
    background: none
}

Важно: этот css должен выполняться после css boostrap-а. Не понимаю только, почему нельзя просто удалить, например, как в этом случае, btn-default из html, у которого указан фоновый цвет.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы