无法使用css类更改颜色
无法使用css类更改颜色
提问于 2018-08-10 03:56:53
如果这太简单了，很抱歉，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函数将触发accordion：
function mostrarTarjetas() {
$('.contenido-tarjetas').slideToggle();
$('.boton-tarjetas').toggleClass('boton-activo');
}同样的js函数将boton-activo类添加到按钮中。
所有这些都运行得很好，问题是按钮应该在悬停时改变颜色(这是有效的)，而当单击它时，由于在js函数上添加了类，所以它应该保持这种颜色。
如果我检查一下devtools，就会发现boton-activo类正在工作，但它正在被boton-tarjetas类的background-color属性覆盖。
请帮帮我。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-10 04:02:45
该问题是由于选择器优先级引起的。您需要使.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标志是另一种可能的解决方案，但除非绝对别无选择，否则应避免使用该标志。
Stack Overflow用户
发布于 2018-08-10 04:34:38
选择器需要更具体
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');})；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51774887
复制相关文章
相似问题