如何在鼠标悬停时显示元素

学习如何在鼠标悬停时显示元素。

将鼠标悬停在我身上。
当有人将鼠标悬停在上面的 div 上时，我就会显示出来。

如何在鼠标悬停时显示元素

第一步 - 添加 HTML：

<div class="myDIV">将鼠标悬停在我身上。</div>
<div class="hide">当有人将鼠标悬停在上面的 div 上时，我就会显示出来。</div>

第二步 - 添加 CSS：

.hide {
  display: none;
}

.myDIV:hover + .hide {
  display: block;
  color: red;
}

亲自试一试

例子解释：

相邻同级选择器 (+) 选择与指定元素相邻的所有元素。

“相邻”一词的意思是“紧随其后”，上面的例子选择所有带有 class=".hide" 的元素，这些元素在悬停时紧接着放置在带有 class=".myDIV" 的元素之后。

相关页面

教程：CSS 组合器