HTML CSS: How do I make Checkbox only Visible when it is Hovered or Selected

Question

How do I make Checkbox only be Visible when:

1) It is Hovered over

2) or Selected

3) It is Not visible, when unselected; it only becomes visible when hovered over again

Ideally prefer not to use JavaScript, only Css-- but if JavaScript is necessary, thats good. This works only for first time, after I check, but after then unchecked, I Cannot to see checkbox ever again. It only works once !

Checkbox html:

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

Checkbox css:

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



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

Checkbox Javascript:

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

Resource:

Changing CSS visibility with JavaScript if a checkbox has been checked

Answer 1

    .cardcheckbox {
        opacity: 0;
    }

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

This is pure CSS solution for you!

Answer 2

Disclaimer: Not an expert. I don't know why the "visbility" value isn't working for you.

Try this:

.cardcheckbox 
{
    opacity: 0;
}

.cardcheckbox:hover        
 {
     opacity:1;
 }