Question

当我将鼠标悬停在div上时，我需要显示一个复选框（默认情况下处于隐藏状态）。这是我的html：

<div class="todoLeftImportance">
    <input type="checkbox" id="todoCheckbox">
</div>

当我将鼠标悬停在“ todoLeftImportance” div上时，我想显示其中的“ todoCheckbox”。我玩过“显示：块”和“显示：无”，但我不知道如何通过CSS将div和复选框链接在一起。

Answer 1

CSS供您参考，希望对您有所帮助

#todoCheckbox{
display: none;
}

.todoLeftImportance:hover #todoCheckbox{
display:block;
}

Answer 2

你在这里。

<html>
<head>
<style>
.todoLeftImportance{
  opacity: 0.0;
  transition: all 300ms linear;
}

.todoLeftImportance:hover{
  opacity: 1.0;
}
</head>
</style>
<body>
<div class="todoLeftImportance">
    <input type="checkbox" id="todoCheckbox">
</div>
</body>
</html>

Answer 3

添加此CSS

#todoCheckbox{ visibility: hidden; }                           
.todoLeftImportance:hover #todoCheckbox{ visibility: visible; }

将鼠标悬停在div上时如何显示复选框

3 个答案: