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函数将触发手风琴：

function mostrarTarjetas() {
    $('.contenido-tarjetas').slideToggle();
    $('.boton-tarjetas').toggleClass('boton-activo');
}

同样的js函数将boton-activo类添加到按钮。

所有功能都很棒，问题在于，当鼠标悬停在按钮上时（该按钮在起作用），它应该改变颜色；当单击该按钮时，由于js函数上添加了类，它应该保持该颜色。

如果我检查devtools，则boton-activo类可以正常工作，但是它会被background-color类的boton-tarjetas属性覆盖。

请帮助我。

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标志是另一种可能的解决方案，但是除非绝对没有其他选择，否则应避免这样做。

Answer 2

选择器需要更具体

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');

}）;

https://jsfiddle.net/Danielprabhakaran_N/xpvt214o/581603/

无法使用CSS类更改颜色

2 个答案: