:active pseudo-class does not work correctly

Question

I have the below code that modifies div.ball when a label is clicked:

$("div.btnyesno").find("label.yes").click(function() {
    $(this).parents().eq(1).find("div.ball")
          .removeClass("btnNo")
          .addClass("btnYes");
});
$("div.btnyesno").find("label.no").click(function() {  
    $(this).parents().eq(1).find("div.ball")
          .removeClass("btnYes")
          .addClass("btnYNo");
});

it works fine.

Now, this is the HTML code:

<div class="bandejas">
    <label>Bandejas</label>
    <div class="btnyesno">
        <input type="radio" name="bandejas" id="bdj_1" value="1">
        <input type="radio" name="bandejas" id="bdj_2" value="2">
        <label role="button" for="bdj_1" id="bdj1" class="yes">1</label>
        <div class="containerball">  
            <div class="ball"></div>
        </div>
        <label role="button" for="bdj_2" id="bdj2" class="no">2</label>
    </div>
</div>

My intent is alter the js code to css

I try of the above form. I works by half.

div.btnyesno > label.yes:active ~ div.containerball > div.ball{
    left: 5px !important;
    background: blue;
}

div.btnyesno > label.no:active ~ div.containerball > div.ball{
    right: 5px !important;
    background: #ccc;
}

At click in the label, the ball is foating to lef as expeted, but when i leave the mouse, then the ball back to original position automatly.

What to do to fix it wrong?

div.btnyesno > input[type="radio"] {
    display: none;
}
div.btnyesno {
    position: relative;
    display: flex;
    width: 200px;
    height: 70px;
}
div.btnyesno > div.containerball {
    position: relative;
    display: flex;
    align-items: center;
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    border-radius: 500px;
}
div.btnyesno > div.containerball > div.ball {
    position: absolute;
    display: flex;
    left: 50px;
    width: 45px;
    height: 45px;
    background: #ccc;
    align-items: center;
    justify-content: center;
    border-radius: 500px;
    transition: all 500ms;
}
div.btnyesno > label{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    cursor: pointer;
}
div.btnyesno > label.yes {
    left: -10px;
}
div.btnyesno > label.no {
    right: -10px;
}   
.btnYes {
    left: 5px !important;
    background: blue !important;
}
.btnNo {
    right: 5px !important;
    background: #ccc !important;
}

div.btnyesno > label.yes:active ~ div.containerball > div.ball{
    left: 5px !important;
    background: blue;
}

div.btnyesno > label.no:active ~ div.containerball > div.ball{
    right: 5px !important;
    background: #ccc;
}

<div class="bandejas">
    <label>Bandejas</label>
    <div class="btnyesno">
        <input type="radio" name="bandejas" id="bdj_1" value="1">
        <input type="radio" name="bandejas" id="bdj_2" value="2">
        <label role="button" for="bdj_1" id="bdj1" class="yes">1</label>
        <div class="containerball">  
            <div class="ball"></div>
        </div>
        <label role="button" for="bdj_2" id="bdj2" class="no">2</label>
    </div>
</div>

Edit:

I try this form:

div.btnyesno > input:nth-child(1):checked ~ div.containerball > div.ball {
    left: 5px !important;
    background: blue;
}
div.btnyesno > input:nth-child(2):checked ~ div.containerball > div.ball {
    right: 5px !important;
    background: #ccc;
}

its works. But, how its is verys blocks:

Once to "bandejas", other for "shipping free", other for 'bloq', then the first block, works fine, but the others is checking automatly and only.

Answer 1

Try it like this

$(document).ready(function(){

    $(".labelClick").on("click", function() {
    if($(this).attr('rel') === 'yes'){
    
      $(this).parents().eq(1).find("div.ball")
      .removeClass("btnNo")
      .addClass("btnYes");
      
    }else if( $(this).attr('rel') ==='no' ){
    
    $(this).parents().eq(1).find("div.ball")
      .removeClass("btnYes")
      .addClass("btnYNo");
    }
        
    });



})