如何使用 CSS 變更將滑鼠懸停在其父元素上時子元素的樣式？

使用CSS 更改懸停時的元素

將滑鼠懸停在特定元素上時，您可能想要對另一個元素進行更改。這可以透過 CSS 來實現，但前提是隱藏元素是懸停元素的子元素。

考慮以下範例：

<div>
<p>改變隱藏div 的背景顏色當滑鼠停留在獵豹div 上時，新增以下CSS：</p>
<pre class="brush:php;toolbar:false">#cheetah {
  background-color: red;
  color: yellow;
  text-align: center;
}

a {
  color: blue;
}

#hidden {
  background-color: black;
}

#cheetah:hover #hidden {
  background-color: orange;
  color: orange;
}

透過指定#cheetah:hover #hidden，您僅當獵豹div 懸停在上方時才選擇隱藏的div。這允許您更改其外觀而不影響任何其他元素。