如何在鼠標懸停時顯示元素

學習如何在鼠標懸停時顯示元素。

將鼠標懸停在我身上。
當有人將鼠標懸停在上面的 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 組合器