时间戳

首页 > 解决方案 > jQuery addClass 没有效果

javascript - jQuery addClass 没有效果

问题描述

我有一个类，我想用 javascript 函数更改单个属性。

.msg_archivedropdown:before {
    content:"";
    display: block;
    position:absolute;
    width:0;
    height:0;
    left:-7px;
    top:0px;
    border-top: 10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:7px solid #FFFFFF; 
}

我已经在使用 jQuery，所以我尝试使用addClass：

function colorbubble(){
    $("archivedropdown before").addClass("msg_archivedropdownhover before");
}

添加的类看起来像这样，只有边框颜色发生了变化：

.msg_archivedropdownhover:before {
    content:"";
    display: block;
    position:absolute;
    width:0;
    height:0;
    left:-7px;
    top:0px;
    border-top: 10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:7px solid #DFDFDF;
}

可悲的是，没有什么改变。到目前为止，我已经尝试了各种方法。我试过这样做：

$('.msg_archivedropdown before').css('border-right-color','#DFDFDF;');

这让我无处可去，我也试图循环通过一个getElementsbyClass也不起作用的。我做错了什么。有人可以给我一个提示吗？谢谢你。

编辑：

这是一个演讲泡泡，我在课堂上制作了一个三角形.msg_archivedropdown:before。在一个mouseover事件中，我也想更改三角形的颜色。所以我只想改变.msg_archivedropdown:before类的颜色。

标签： javascriptjquerycss

解决方案

对于像这样的微不足道的情况，您不需要 jquery。您可以改用:hover伪类。

.msg_archivedropdown {
    width: 100px;
    height: 100px;
    background-color: rebeccapurple;
    position: relative;
}

.msg_archivedropdown::before {
    content:"";
    display: block;
    position:absolute;
    width:0;
    height:0;
    left:-7px;
    top:0px;
    border-top: 10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:7px solid #FFFFFF; 
}

.msg_archivedropdown:hover::before {
    border-right:7px solid #DFDFDF;
}
<div class="msg_archivedropdown"></div>

推荐阅读