:active 伪类无法正常工作答案

【问题标题】：:active pseudo-class does not work correctly:active 伪类无法正常工作
【发布时间】：2020-12-28 14:14:23
【问题描述】：

我有以下代码在点击标签时修改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;
}

在标签上点击时，球会像expected一样向左移动，但是当我离开鼠标时，球会自动回到原来的位置。

如何解决错误？

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”，然后是第一个块，工作正常，但其他只是自动检查。

【问题讨论】：

:active 不是这样做的。 :active 伪类在 mousedown 发生时应用，并在 mouseup 触发或光标移出元素时被删除。如果您想使用纯 CSS 跟踪状态，则需要使用复选框和 :checked 伪类。
我不能，因为我使用标签代替单选按钮。
你需要某个地方来保持状态。通常在 JS 中，该状态将是一个布尔变量，但如果您纯粹依赖 CSS，那么您将需要其他一些状态持有者。通常你会选择一个具有:checked 状态的元素（一个复选框，或者，在紧要关头，一个单选按钮）。另一种方法是让链接指向具有 id 属性的元素。这将让您使用 :target 伪类代替，这可能足以满足您的需求？
例如，将标签更改为按钮？
我认为是的。但是请参阅我的questin的决赛中的pelase。我提出了一个解决方案，但有一个问题。

标签： jquery css css3pie

【解决方案1】：

这样试试

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



})

【讨论】：

没有。朋友。我想排除 js 代码然后使用 css 代码。