如何使用 CSS 更改懸停時同級 HTML 元素的顏色？

如何在CSS 中更改懸停時同級元素的顏色

在HTML 中，同級元素是共享相同父元素的元素。將滑鼠懸停在特定元素上時，通常需要更改其同級元素的外觀。

更改後續同級元素的顏色

更改某個元素的顏色懸停元素後面的同級元素，請使用CSS 中的相鄰同級選擇器( )。例如，要更改以下 的顏色：當前面的

為元素懸停：

h1 {
  color: #4fa04f;
}

h1 + a {
  color: #a04f4f;
}

h1:hover + a {
  color: #4f4fd0;
}

限制：更改前一個同級元素的顏色

CSS 不提供直接方法來更改前一個同級元素的樣式基於其兄弟元素的懸停狀態的元素。

使用包裝器Div

用 ID 將元素包裝在 div 中允許您使用更複雜的 CSS 選擇器更改前一個同級元素的顏色。

<div>

#banner h1 {
  color: #4fa04f;
}

#banner a {
  color: #a04f4f;
}

#banner h1:hover a {
  color: #4f4fd0;
}

#banner:hover a {
  color: #a04f4f;
}

這種方法允許更好地控制同級元素的樣式，但它引入了額外的標記並且效率較低。

以上是如何使用 CSS 更改懸停時同級 HTML 元素的顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！