如何僅使用 CSS 在多個元素上建立同步懸停效果？

實現多個元素的懸停效果

在Web開發中，經常會遇到多個元素需要響應懸停互動的場景。考慮以下 HTML 結構：

<div class="section">
  <div class="image"><img  src="/static/imghwm/default1.png" data-src="myImage.jpg" class="lazy" alt="如何僅使用 CSS 在多個元素上建立同步懸停效果？" ></div>
  <div class="layer">Lorem Ipsum</div>
</div>

「.image」和「.layer」元素的正常狀態和懸停狀態的邊框顏色不同。目標是當「.layer」元素懸停在上方時更改兩個元素的懸停邊框顏色。

CSS 解決方案

無需JavaScript、CSS 即可實現此目的可以使用：

.section {
  background: #ccc;
}

.layer {
  background: #ddd;
}

.section:hover img {
  border: 2px solid #333;
}

.section:hover .layer {
  border: 2px solid #F90;
}

在此程式碼中：

• '.section' 類別指定背景顏色。
• '.layer' 類別定義 '.layer' 元素的背景顏色和邊框寬度。
• '.section:hover img ' 規則會在 '.section' 懸停時更改影像的邊框顏色。
• '.section:hover .layer' 規則修改邊框相同懸停條件下“.layer”元素的顏色，確保兩個元素都能響應“.layer”元素上的懸停交互。

此解決方案提供了一種創建同步懸停效果的優雅方法無需依賴腳本即可處理多個元素。

以上是如何僅使用 CSS 在多個元素上建立同步懸停效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！