在悬停时显示元素

---

了解如何在悬停时显示元素。

---

悬停在这里。 当有人将鼠标悬停在上面的 div 上时显示。

---

如何在悬停时显示元素

步骤 1) 添加 HTML:

实例

<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when someone hovers over the div above.</div>

---

步骤 2) 添加 CSS:

实例

.hide {
  display: none;
}

.myDIV:hover + .hide {
  display: block;
  color: red;
} 亲自试一试 »

实例解析

相邻兄弟选择器（+）选择与指定元素相邻的所有元素。

"相邻"一词的意思是"紧随其后"，上面的示例选择了所有带有 class=".hide" 的元素，这些元素悬停时紧跟在带有 class=".myDIV"。

转到我们的 CSS 组合器教程，了解有关相邻选择器的更多信息。