HTML CSS: как сделать флажок видимым только когда он находится или выбран

Question

Как сделать флажок видимым, только когда:

1) Он находится над

2) или выбран

3) Не отображается, если не выбран;он становится видимым только при повторном наведении

В идеале предпочитают не использовать JavaScript, только Css--, но если JavaScript необходим, это хорошо.Это работает только в первый раз, после того, как я проверил, но после того, как затем снял флажок, я больше не могу видеть флажок.Работает только один раз!

Флажок html:

<div cardcheckbox id="checkboxdiv">
    <input type="checkbox" class="cardcheckbox" id="checkid" align="right" onclick="toggleBoxVisibility()"/>
</div>

Флажок css:

.cardcheckbox 
{
    position: absolute;
    right: 10px;
    top: 5px;
    vertical-align: middle;
    float: right;
    visibility: hidden;
}



.card:hover .cardcheckbox         
 {
     visibility: visible;
 }

Флажок Javascript:

function toggleBoxVisibility() {
    if (document.getElementById("checkid").checked == true) {
        document.getElementById("checkid").style.visibility = "visible";
    }
else {
    document.getElementById("checkid").style.visibility = "hidden";
    }
}

Ресурс:

Изменение видимости CSS с помощью JavaScript, если флажок установлен

Answer 1

    .cardcheckbox {
        opacity: 0;
    }

    .cardcheckbox:hover,
    .cardcheckbox:checked {
        opacity: 1;
    }

Это чистое решение CSS для вас!

Answer 2

Отказ от ответственности: не эксперт.Я не знаю, почему значение «видимости» не работает для вас.

Попробуйте:

.cardcheckbox 
{
    opacity: 0;
}

.cardcheckbox:hover        
 {
     opacity:1;
 }