jQuery addClass causes no effect

I have a class where I want to change a single attribute with a javascript function.

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

I'm already using jQuery, so I've tried to do it with addClass:

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

The added class looks like this, only the border color changes:

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

Sadly, there's nothing changing. I've tried various kind of ways so far. I've tried to do it with:

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

Which got me nowhere and I also tried to loop through a getElementsbyClass which did not work either. I´m doing something wrong. Can someone please give me a hint? Thank you.

EDIT:

It's a speech-bubble where I made a triangle in the .msg_archivedropdown:before-class. On a mouseover event I want to change the color of the triangle as well. So I only want to change the color of the .msg_archivedropdown:before class.

2 answers

  • answered 2018-11-08 08:20 VilleKoo

    You don't need jquery for a trivial case like this. You could just use :hover pseudo-class instead.

    .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>

  • answered 2018-11-08 08:21 לבני מלכה

    You want to change the pseudo :before element in Jquery and you can't do it use $('.msg_archivedropdown:before')

    so your alternative is to add class with pseudo element as msg_archivedropdown and in function toggleClass then the new class apply on DOM with the boreder-color

    Do it as below:

    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; 
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <div class="msg_archivedropdown">show div</div>
    <button onclick="colorbubble()">change</button>