Не могу изменить цвет с помощью класса css
Извините, если это слишком просто, css меня смущает.
Итак, у меня есть такая "кнопка":
<div class = "col-md-12 bloque izq boton-tarjetas" onclick = "mostrarTarjetas()">
<p class = "titulo2">- Tarjetas de Invitacion</p>
</div>
Эта кнопка использует этот класс css:
.boton-tarjetas {
cursor: pointer;
background-color: #508365;
}
И при наведении курсора на кнопку свойство backgound-color изменяется с использованием этого класса css:
.boton-tarjetas:hover, .boton-activo {
background-color: #30513d;
}
Если кнопка нажата, эта функция js запускает аккордеон:
function mostrarTarjetas() {
$('.contenido-tarjetas').slideToggle();
$('.boton-tarjetas').toggleClass('boton-activo');
}
И та же самая функция js добавляет к кнопке класс boton-activo.
Все, что работает замечательно, проблема в том, что кнопка должна менять цвет при наведении курсора (что работает), а при нажатии она должна оставаться в этом цвете из-за добавленного класса в функции js.
Если я проверю инструменты разработчика, класс boton-activo работает, но он перезаписывается свойством background-color класса boton-tarjetas.
Пожалуйста, помоги мне.
не могли бы вы попробовать добавить !important после правила CSS?
@TheDarkKnight !important - почти всегда можно избежать взлома, лучше не рекомендовать его :-)
Ответы 2
Проблема связана с приоритетом селектора. Вам нужно сделать класс .boton-activo более конкретным, чтобы он перекрывал все предыдущие стили:
.boton-tarjetas {
cursor: pointer;
background-color: #508365;
}
.boton-tarjetas:hover,
.boton-tarjetas.boton-activo { /* note additional class selector here */
background-color: #30513d;
}
Обратите внимание, что флаг !important - еще одно возможное решение, но его следует избегать, если нет абсолютно никакой альтернативы.
используя этот порядок, вам не нужно добавлять еще один класс ... последний выиграет, поскольку они имеют одинаковую специфику
@Temani: Если это правда, но я считаю, что лучше быть явным на тот случай, если кто-то изменит ваши файлы CSS :)
Хорошо, но вы можете создать путаницу, говоря, что проблема заключается в приоритете этого порядка ... Я бы, вероятно, объяснил это по-другому и сказал, что лучше добавить еще один класс, чтобы быть уверенным, что он будет работать в любом порядке.
селектор должен быть более конкретным
HTML:
<div class = "col-md-12 button-target">
<p class = "title">accordian Title</p>
<div class = "content-target">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
</div>
</div>
CSS:
.button-target {
cursor: pointer;
background-color: #508365;
}
.button-target:hover, .button-target.button-active {
background-color: #30513d;
}
СЦЕНАРИЙ:
$('.button-target').click(function() {
$('.content-target').slideToggle();
$('.button-target').toggleClass('button-active');
});
покажите нам порядок вашего CSS