Question

I如何创建行为类似于音频控件的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>

Answer 1

您可以为此使用不透明度。

.toggle{
  height:200px;
  opacity:0;
}

.toggle:hover{
  opacity:1;
}

<div class="toggle">I want to be seen on hover!</div>

Answer 2

您还有另一个选择，就是将您可能要隐藏的内容包装到另一个具有:hover悬停伪类的div中。

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

如何在悬停时切换div的可见性？

2 个答案: