<a>使用 CSS悬停在标签上时显示 <div>元素

CSS（层叠样式表）是一种用于描述网页样式和布局的语言。其中一种常见的应用是在网页中使用超链接（<a>标签）。当用户将鼠标悬停在超链接上时，我们可以使用 CSS 展示一些相关的信息，例如一个弹出框或是一个隐藏的元素。

CSS :hover 伪类

CSS 中的伪类是用于指定不同状态下的样式的。其中，:hover 伪类表示鼠标悬停在元素上时的状态。我们可以利用 :hover 伪类来为超链接指定鼠标悬停时的样式称为“悬停状态”。

下面是一些基本的悬停状态 CSS 样式：

a:hover {
  /* 悬停时的字体颜色和加粗 */
  color: red;
  font-weight: bold;
}

/* 当悬停在 ID 为 "example" 的 div 上时显示 */
#example:hover {
  display: block;
}

/* 当子元素悬停在父元素上时改变父元素的背景颜色 */
.parent:hover .child {
  background-color: grey;
}

悬停显示 <div> 元素

由于我们想要显示一个隐藏的 <div> 元素，我们可以使用上述 :hover 伪类来为超链接指定显示或隐藏该 <div> 元素的样式。

下面是一些用于悬停显示 <div> 元素的 CSS 样式：

/* 定义要隐藏的 <div> 元素 */
.hidden {
  display: none;
}

/* 当悬停在 <a> 标签上时显示 <div> 元素 */
a:hover + .hidden {
  display: block;
}

/* 当悬停在 ID 为 "example" 的 <div> 上时显示 <div> 元素 */
#example:hover + .hidden {
  display: block;
}

/* 当悬停在类名为 "hoverable" 的元素上时显示 .hidden 元素 */
.hoverable:hover + .hidden {
  display: block;
}

在上述样式中，我们使用了加号 (+) 选择器来选择悬停在 <a> 标签上时紧接着的下一个 <div> 元素。

我们还可以通过在 <a> 标签和 <div> 元素之间添加一个公共的父元素来实现悬停显示 <div> 元素的效果，例如：

<div class="container">
  <a href="#">Hover Me</a>
  <div class="hidden"><p>This div will be displayed when hovering over the link.</p></div>
</div>

<style>
  .container .hidden {
    display: none;
  }

  .container a:hover + .hidden {
    display: block;
  }
</style>

这种方法可以避免在使用多个 <a> 标签时产生的选择器嵌套问题。

结论

在悬停状态下使用 CSS 来显示/隐藏 <div> 元素可以为网页添加一些互动性和信息展示功能。我们可以使用 :hover 伪类和加号 (+) 选择器来实现该效果，无需任何 JavaScript 代码。