當滑鼠懸停在另一個元素上時，CSS 會影響一個元素的不透明度嗎？

將滑鼠停留在不同元素上時元素會互相影響嗎？

問題：

目標是透過將滑鼠懸停在另一個元素(img) 上來修改一個元素(#thisElement) 的不透明度，而無需利用JavaScript。

所需功能：

將滑鼠懸停在“img”上時，“img”的不透明度應增加到100%，而“#thisElement”的不透明度應增加' 應減少至30%。

CSS限制：

不幸的是，CSS 本身無法實現這種效果，因為它缺乏根據不同元素的懸停來將樣式應用於元素的能力。

選項影響相鄰元素：

但是，CSS 可以改變與相鄰元素相關的元素的樣式懸停元素：

• 後代： 將樣式套用於子元素或巢狀元素。例：

  #parent_element:hover #child_element {
    opacity: 0.3;
  }

• 相鄰同級： 影響緊鄰懸停元素之後或之前的元素。範例：

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

建議的解決方案：

基於給定的HTML 結構，其中'img' 具有緊鄰其下方的兄弟姐妹，無需嵌套，您可以利用相鄰的同級選擇器：

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

此CSS 規則將調整與懸停的「img」元素相鄰的「img」元素的不透明度。

以上是當滑鼠懸停在另一個元素上時，CSS 會影響一個元素的不透明度嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！