可以使用 CSS 將一個元素上的懸停效果級聯到另一個元素嗎？

對一個元素的影響可以影響另一個元素嗎？

給定的程式碼旨在增強影像的不透明度，同時降低另一個元素的不透明度當遊標懸停在影像上時。雖然這樣的效果看起來很簡單，但光靠 CSS 就無法執行它。

要建立所需的效果，兩個受影響的元素必須是代碼中的後代或相鄰的兄弟元素。

對後代的影響

#parent_element:hover #child_element, /* or */
#parent_element:hover > #child_element {
    opacity: 0.3;
}

這會影響結構化的元素如下：

<div>

對鄰近同級的影響

#first_sibling:hover + #second_sibling {
    opacity: 0.3;
}

這適用於HTML結構：

<div>

在這兩種情況下，選擇器中的第二個元素受到影響。

對於查詢中註明的特定需求，像這樣的表達式可能有效：

img:hover + img {
    opacity: 0.3;
    color: red;
}

[JS Fiddle 示範](https://jsfiddle.net/)

以上是可以使用 CSS 將一個元素上的懸停效果級聯到另一個元素嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！