如何使用 CSS 變更懸停時同級元素的顏色？

使用 CSS 操作懸停時同級元素的顏色

修改 HTML 元素外觀的一種方法是透過 CSS。在本文中，我們將探討一個特定的請求：將滑鼠懸停在同級元素上時更改其顏色。

原始問題陳述

給出以下HTML 代碼：

<h1 id="Heading">Heading</h1>
<a class="button" href="#">-</a>

我們的目標是改變

的顏色當我們將鼠標懸停在 上時的元素單獨使用CSS 的元素。

同級元素互動

不幸的是，CSS 同級選擇器無法影響它們前面的元素。在上面的範例中，

元素位於 之前元素，因此無法使用（緊接在後的同級）選擇器直接變更其顏色。

基於容器的解決方案

一個解決方法是引入父容器div帶有id:

<div>
<p>但是，這並不提供<a> 之間的直接連接。元素和<h1> </h1></a></p>
<p><strong>替代方法</strong></p>
<p>要克服此限制，請考慮使用CSS 來定位「下一個兄弟元素」（位於指定元素之後的元素） 。下面的範例示範如何實現此目的：</p>
<pre class="brush:php;toolbar:false">h1 {
  color: #4fa04f;
}

h1 + a {
  color: #a04f4f;
}

h1:hover + a {
  color: #4f4fd0;
}

這會更新 的顏色。元素在其預設狀態下為#a04f4f，當我們將滑鼠停留在

上時為#4f4fd0。元素。