CSS 懸停效果會影響非目標元素嗎？

CSS 懸停效果可以擴展到不同的元素嗎？

在 CSS 中，無法直接將懸停效果套用於相鄰或嵌套在另一個元素中的元素。這意味著該效果仍然僅限於其所應用的元素，並且您不能使用它來影響其他元素。

後代和相鄰同級效果

但是，此規則有兩個例外當使用相鄰同級選擇器( ) 或後代選擇器時(>):

• 相鄰同級元素： 如果兩個元素是相鄰同級元素（在HTML程式碼中直接出現在彼此之後），則可以基於一個元素對一個元素應用效果使用相鄰同級選擇器在另一個的懸停狀態上。例如：

#first-sibling:hover + #second-sibling {
  opacity: 0.3;
}

• 後代： 同樣，如果一個元素是另一個元素的後代（嵌套在內部），您可以將效果應用於基於後代的使用後代選擇器在父級的懸停狀態上。例如：

#parent-element:hover #child-element {
  opacity: 0.3;
}

解決您的問題

在您的特定範例中，當使用者將滑鼠懸停在帶有a 的圖像上時，您想要更改名為#thisElement 的元素的不透明度「img」類別。但是，您無法在“img”上使用 CSS 懸停效果直接定位 #thisElement。相反，您可以考慮：

1. 使用相鄰兄弟： 如果#thisElement 是HTML 中圖像的下一個相鄰兄弟，您可以使用：

.img:hover + #thisElement {
  opacity: 0.3;
}

2. 使用後代：如果#thisElement嵌套在映像的容器內，您可以使用：

.img-container:hover #thisElement {
  opacity: 0.3;
}

以上是CSS 懸停效果會影響非目標元素嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！