如何在 CSS 中將滑鼠懸停在另一個元素上時更改元素外觀？

使用CSS 更改懸停在另一個元素上的元素外觀

在CSS 樣式領域，通常需要修改一個元素的外觀當當遊標懸停在另一個上時。這可以透過選擇器和 :hover 偽類的組合來實現。

考慮以下場景：您有一個容器元素（例如，一個 div）和一個隱藏元素（例如，另一個 div），包含附加資訊。當滑鼠懸停在容器元素上時，您希望隱藏元素出現並顯示其內容。

在提供的範例中：

<div>
<pre class="brush:php;toolbar:false">a:hover + #hidden {
  background-color: orange;
  color: orange;
}

不幸的是，這種方法不不起作用，因為 #hidden div 不是 a 元素的直接子元素。若要解決此問題，請確保隱藏元素是要觸發懸停效果的元素的子元素。

<div><p>透過此修改，a:hover #hidden 選擇器將正確識別隱藏元素元素並在遊標停留在元素上時套用所需的樣式。 </p></div>