如何使用 CSS 在父級懸停時設定子元素的樣式？

使用CSS對子元素的懸停效果

要修改子元素懸停在其父元素上時的樣式，您可以使用以下CSS 技術：

.parent:hover .child {}

此 CSS 規則利用 :hover 偽類來定位處於懸停狀態的父元素 (“.parent”)。規則中的後代組合符（空格）選擇與“.child”類別相符的任何後代元素。

透過套用此規則，您可以根據父元素的懸停狀態來變更子元素的屬性元素。例如，以下程式碼片段更改“.child”元素的背景顏色，並在其“.parent”元素懸停在其上時將其放大：

.parent:hover .child {
   background-color: #cef;
   transform: scale(1.5);
}

此方法提供了跨瀏覽器相容性和有效地允許您根據與父元素的互動來設定子元素的樣式。

以上是如何使用 CSS 在父級懸停時設定子元素的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！