:active 伪类不能正常工作

问题描述

我有以下代码可以在点击标签时修改 div.ball：

$("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");
});

效果很好。

现在，这是 HTML 代码：

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

我的意图是将 js 代码 更改为 css

我尝试了上述形式。我工作了一半。

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

编辑：

我试试这个表格：

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

它的作品。但是，它是如何阻塞的：

一次到“bandejas”，另一个是“免运费”，另一个是“bloq”，然后是第一个块，工作正常，但其他的只是自动检查。

解决方法

试试这个

$(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");
    }
        
    });



})

css3pie jquery