jquery - 无法使用 css 类更改颜色

Question

抱歉，如果这太基础了，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 属性覆盖 类。

请帮帮我。

Answer 1

问题是由于选择器的优先级。您需要使 .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 标志是另一种可能的解决方案，但除非别无选择，否则应避免这种情况。