CSS – 鼠标移入一个元素，并使另一个元素可见

在本文中，我们将介绍如何使用CSS实现鼠标移入一个元素时，使另一个元素可见的效果。这种效果通常被称为”鼠标悬停”效果，它使网页在用户与网页进行交互时更加生动和交互性。我们将使用CSS伪类选择器和属性来实现这个效果。

阅读更多：CSS 教程

CSS伪类选择器

伪类选择器是CSS中的一种特殊选择器，可以选择处于特定状态的元素。常见的伪类选择器有:hover（鼠标悬停）、:active（元素处于活动状态，通常是鼠标点击时的状态）和:focus（元素获得焦点）等。在实现鼠标悬停效果时，我们将使用:hover伪类选择器。

示例

让我们通过一个示例来演示如何使用CSS实现鼠标移入一个元素时，使另一个元素可见。

HTML代码：

<div class="parent">
  <div class="child"></div>
  <div class="overlay">这是另一个元素</div>
</div>

CSS代码：

.parent {
  position: relative;
}

.child {
  width: 200px;
  height: 200px;
  background-color: red;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.parent:hover .overlay {
  opacity: 1;
}

在上面的示例中，我们创建了一个父容器(parent)和两个子元素(child和overlay)。父容器用于包裹两个子元素。子元素child是一个红色的正方形，子元素overlay是一个透明黑色叠加层，在默认情况下是隐藏的opacity: 0。当鼠标移入父容器时，通过使用CSS选择器.parent:hover .overlay，我们将叠加层的透明度设置为opacity: 1，从而使其可见。

我们还使用了一些CSS属性来使叠加层居中显示。position: absolute用于使叠加层脱离正常文档流，并相对于其最近的非static定位祖先元素进行定位。top: 50%; left: 50%和transform: translate(-50%, -50%)使叠加层居中显示。

你可以尝试在浏览器中打开这个示例，当鼠标悬停在红色正方形上时，叠加层将变得可见。