Javascript HTML CSS：如何使复选框仅在悬停或选中时可见

如何使复选框仅在以下情况下可见：

1）它悬停在

2）或选定的

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

理想情况下，我们不喜欢使用JavaScript，只喜欢使用Css——但如果需要JavaScript，那就好了。 这只在我选中后第一次起作用，但在取消选中后，我再也看不到复选框了。它只工作一次

复选框html:

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

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



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

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

复选框Javascript:

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

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



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

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

资源：

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

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



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

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

---

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

试试这个：

.cardcheckbox 
{
    opacity: 0;
}

.cardcheckbox:hover        
 {
     opacity:1;
 }

---

这是你的纯CSS解决方案

那么，如何将鼠标悬停在不可见的复选框上？或者您的意思是当鼠标悬停在标签或父div上时仅显示复选框？无需使用java脚本，

visibility:hidden

禁用元素上的指针事件。正如其他答案所提到的，如果你想对悬停做出反应，你需要使用不透明。谢谢，这太棒了，顺便问一下，javascript或css是更好的编码练习方式吗？我还发现了一种javascript方式，就我个人而言，CSS方式比JS方式好。它可以给你更好的表现和更少的头痛我想我们不能点击“可见性：隐藏；”元素（但是我们可以使用tab键来关注这个问题），所以不透明度是隐藏这个复选框的更好方法