css实现鼠标悬停时元素的显示与隐藏

在CSS中，可以使用:hover伪类选择器来实现鼠标悬停时元素的显示与隐藏。这通常结合使用display属性或visibility属性来完成。

使用display属性，可以设置none来隐藏元素，设置block、inline或inline-block等来显示元素。

使用visibility属性，可以设置hidden来隐藏元素，但保留其在页面上的空间，设置visible来显示元素。

以下是一个使用display属性实现的示例：

HTML:

<div class="container">
  鼠标悬停我试试
  <div class="hover-content">
    我是要显示的内容
  </div>
</div>

CSS:

/* 初始状态下内容是隐藏的 */
.hover-content {
  display: none;
}
 
/* 当鼠标悬停在父容器上时，显示内容 */
.container:hover .hover-content {
  display: block;
}

以下是使用visibility属性实现的示例：

HTML:

<div class="container">
  鼠标悬停我试试
  <div class="hover-content">
    我是要显示的内容
  </div>
</div>

CSS:

/* 初始状态下内容是隐藏的 */
.hover-content {
  visibility: hidden;
}
 
/* 当鼠标悬停在父容器上时，显示内容 */
.container:hover .hover-content {
  visibility: visible;
}

在这两个示例中，.hover-content元素默认是隐藏的。当鼠标悬停在.container元素上时，.hover-content元素的显示状态会根据选择的属性进行切换。