Question

如何使Checkbox仅在以下情况下可见：

1）鼠标悬停在

上

2）或已选择

3）未选中时不可见；它只有在再次悬停时才可见

理想情况下，宁愿不要仅使用CSS来使用JavaScript，但是如果需要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";
    }
}

资源：

Changing CSS visibility with JavaScript if a checkbox has been checked

Answer 1

免责声明：不是专家。我不知道为什么“可见度”值对您不起作用。

尝试一下：

.cardcheckbox 
{
    opacity: 0;
}

.cardcheckbox:hover        
 {
     opacity:1;
 }

Answer 2

    .cardcheckbox {
        opacity: 0;
    }

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

这是纯CSS解决方案！

HTML CSS：如何将复选框悬停或选中时才可见

2 个答案: