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

问题描述

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>

标签： htmlcss

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

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

.toggle:hover{
  opacity:1;
}

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

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

问题描述

解决方案

推荐阅读