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

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

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

对不起,如果这是太基本,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函数上添加了类。

提问于
用户回答回答于

选择器需要更具体

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/

热门问答

腾讯会议,电脑版,召开会议提示发生异常(错误码:-161)),是什么问题?

推荐已采纳
-161是媒体服务器连接超时,造成该问题的原因可能有: 1. 网络异常 2. 开启了V** 3. 网络有防火墙或上网策略控制 4. 安装风行加速器进行LSP劫持 可以按照上述信息排查一下。... 展开详请

对象存储通过直传首次上传成功后怎么使直传链接失效,防止重新上传?

可酷可乐

腾讯云 · 售后工程师 (已认证)

热爱云计算的小锅一枚。
推荐
从当前的签名机制上看,并不能做到使用后即失效。有两种方式可以降低风险。 1.在web直传模式中,需要向STS申请临时账号,临时账号生效的时间是由durationInSeconds参数控制,可以尽量缩短时间配置。 2.在申请STS时,需要设置policy,确保当前客户端只能上传到C...... 展开详请

通过自行开发web前端从物联网平台获取数据?

DylanRichard

腾讯 · 产品经理 (已认证)

万物互联的时代,欢迎来到IoT的世界
推荐
你们可以自行开发小程序或者服务端接受数据,物联网平台了相关的API接口: 1.服务端API接口:https://cloud.tencent.com/document/product/1081/34957 2.应用端API接口:https://cloud.tencent.com/d...... 展开详请

移动直播iOS端SDK使用动效触发filepath must not be nil相关crash?

腾讯视频云-ZacharyTXLiteAVSDK技术支持
推荐
移动直播TXLiteAVSDK_Enterprise_iOS在6.8及之后的版本,动效资源有改动,如果新版本还是用之前老的版本的动效资源就会导致该crash问题。参考集成文档重新导入一下动效资源即可:https://cloud.tencent.com/document/produ...... 展开详请

关于文字鉴别的违法的问题?

ritchiechen

腾讯 · 后台开发工程师 (已认证)

推荐

请使用 `try catch` 捕获异常,查看堆栈信息

怎么实现存储桶设置私有读写的时候,可以直接访问图片,和复制临时链接一直的功能?

幻象丛林RESTful 服务开发者
推荐
临时链接是携带了签名参数,在后台复制时是自动算好的,可以在签名有效期内临时访问对象。 如果需要自己实现的话可以调用GET Object接口,携带Authorization签名。 GET /<ObjectKey> HTTP/1.1 Host: <BucketName-APPID>....... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动