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

【问题标题】：HTML CSS: How do I make Checkbox only Visible when it is Hovered or SelectedHTML CSS：如何使复选框仅在悬停或选中时可见
【发布时间】：2019-06-28 14:52:51
【问题描述】：

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

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";
    }
}

资源：

Changing CSS visibility with JavaScript if a checkbox has been checked

【问题讨论】：

那么，如何将鼠标悬停在不可见的复选框上？或者您的意思是只在将鼠标悬停在标签或父 div 上时显示复选框？
无需使用java-script，jsfiddle.net/6hu3mL0f/5
visibility: hidden 禁用元素上的指针事件。正如提到的其他答案一样，如果您想对悬停做出反应，则需要使用 opacity。

标签： javascript html css twitter-bootstrap asp.net-core

【解决方案1】：

    .cardcheckbox {
        opacity: 0;
    }

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

这是给你的纯 CSS 解决方案！

【讨论】：

谢谢，这太棒了，顺便说一句，javascript 或 css 是编码练习的首选方式吗？我也找到了一种javascript方式
就我个人而言，CSS 方式优于 JS 方式。它可以为您提供更好的性能和更少的头痛

【解决方案2】：

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

试试这个：

.cardcheckbox 
{
    opacity: 0;
}

.cardcheckbox:hover        
 {
     opacity:1;
 }

【讨论】：

我认为我们不能点击“可见性：隐藏；”元素（但我们可以使用 tab 键来关注它），所以 opacity 是在这种情况下隐藏复选框的更好方法