不能用CSS类更改颜色怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (70)

对不起,如果这是太基本,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;
}

当悬停在按钮上时,background-color属性会使用此css类更改:

.boton-tarjetas:hover, .boton-activo {
    background-color: #30513d;
}

如果单击按钮,则此js函数会触发 :

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

所有这些都很好,问题是按钮在悬停时应该改变颜色(这是工作的),当点击时它应该保持该颜色,因为js函数上添加了类。

提问于
用户回答回答于

此问题是由于选择器优先。你得把.boton-activo类,使其覆盖以前的任何样式:

.boton-tarjetas {
  cursor: pointer;
  background-color: #508365;
}

.boton-tarjetas:hover, 
.boton-tarjetas.boton-activo { /* note additional class selector here */
  background-color: #30513d;
}

Note that the !important标志是另一种可能的解决方案,但除非绝对没有其他选择,否则应该避免这种情况。

用户回答回答于

选择器需要更具体

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;
 }

SCRIPT:

$('.button-target').click(function() {
   $('.content-target').slideToggle();
   $('.button-target').toggleClass('button-active');

});

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

扫码关注云+社区

领取腾讯云代金券