jQuery addClass无效

Question

我有一个要在其中使用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类的颜色。

Answer 1

对于这种琐碎的情况，您不需要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>

Answer 2

您要在Jquery中更改伪OriginAccessIdentity: !Join [ "", [ "origin-access-identity/cloudfront/", "lol-dev" ] ] 元素，而不能使用:before

因此，您的替代方法是添加具有伪元素的类为$('.msg_archivedropdown:before')，并在函数msg_archivedropdown中添加新类，并使用toggleClass将新类应用于DOM

执行以下操作：

boreder-color

function colorbubble(){
    $('.msg_archivedropdown').toggleClass('beforeClass');
}

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