如何使用 CSS 間接修改懸停時元素的樣式？

在懸停時實現間接元素修改

在 Web 開發中，基於使用者互動操作各種元素至關重要。常見的場景是當滑鼠懸停在一個元素上時觸發另一個元素的變更。

考慮 JSFiddle 示範中提供的範例。當 #cube 元素懸停在其上方時，其背景顏色會變為藍色。然而，假設我們想在 #container 元素懸停時實現這種效果。我們如何完成這種間接修改？

使用 CSS :hover 偽類，我們可以指定當某個元素懸停在另一個元素上時，另一個元素應該會改變。讓我們探索可用的選項：

直接在容器內建立立方體：

如果#cube 元素直接嵌套在#container 元素中，我們可以使用以下CSS選擇器:

#container:hover > #cube { background-color: yellow; }

僅當#cube 元素是#container元素的直接子元素時，此選擇器才以 #cube 元素為目標且 #container 元素懸停在上面。

與容器相鄰的立方體：

如果#cube 元素緊鄰#container 元素（在它旁邊）之後，我們可以使用這個選擇器：

#container:hover + #cube { background-color: yellow; }

這個選擇器的目標是緊接在#container 之後的#cube 元素當#container元素懸停在上面時的元素。

容器內嵌套元素內的立方體：

當#cube 元素嵌套在#container 內的另一個元素內時元素，我們可以使用這個選擇器：

#container:hover #cube { background-color: yellow; }

這個選擇器針對的是所有#cube 元素的後代#container 元素，當#container元素懸停在上方時。

容器的同級立方體：

如果#cube 元素與#container 處於同一層次結構層級元素，我們可以使用這個選擇器：

#container:hover ~ #cube { background-color: yellow; }

這個選擇器的目標是#cube 元素，它是當#container 元素懸停在#container元素上時（即，它們共享相同的父元素）。

透過利用這些 CSS 選擇器，當特定元素懸停在上面時，您可以輕鬆修改其他元素的屬性，建立互動式且具有視覺吸引力的網路體驗。

以上是如何使用 CSS 間接修改懸停時元素的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！