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

【问题标题】：How to toggle a div's visibility on hover?如何在悬停时切换 div 的可见性？
【发布时间】：2019-02-19 17:00:47
【问题描述】：

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>

【问题讨论】：

stackoverflow.com/questions/2244566/css-opacity-on-hover-of-div 和许多其他人的副本。

标签： html css

【解决方案1】：

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

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

.toggle:hover{
  opacity:1;
}

&lt;div class="toggle"&gt;I want to be seen on hover!&lt;/div&gt;

【讨论】：

谢谢。你能解释一下为什么切换可见性不起作用吗？
因为隐藏时没有悬停效果。因为它被隐藏了。

【解决方案2】：

您的另一个选择是将您可能想要隐藏的内容包装到另一个具有:hoverhover 伪类的 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;
}

【讨论】：