我创建一个与音频控件类似的div。音频控件使控件不可见，但将光标悬停在隐藏元素的位置使它们可见。以下代码尝试实现此目的，但它不起作用。
.toggle{
height:200px;
visibility:hidden;
}
.toggle:hover{
visibility:visible;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="toggle">I want to be seen on hover!</div>
</body>
</html>您可以使用不透明度。
.toggle{
height:200px;
opacity:0;
}
.toggle:hover{
opacity:1;
}<div class="toggle">I want to be seen on hover!</div>另一个选择是将你可能想要隐藏的内容包装到另一个div中，该div具有:hover悬停伪类
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="toggle">
<div>I want to be seen on hover!</div>
</div>
</body>
</html>
CSS
.toggle div {
height:200px;
visibility: hidden;
}
.toggle:hover div {
visibility:visible;
}