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

在父元素懸停時定位子元素

問題：

當父元素懸停時，我們如何修改子元素的樣式父元素懸停在上面，最好使用CSS？這可以透過 :hover 選擇器實現嗎？

答案：

是的，CSS 為這個要求提供了一個簡單的解決方案。透過利用 :hover 偽類和後代組合器，我們可以專門針對懸停父元素中的子元素。

.parent:hover .child {
   /* ... */
}

在此規則中，當遊標懸停時，:hover 偽類適用於 .parent 元素超過它。然後，後代組合器（空格）選擇與 .child 類別相符的任何後代元素。這允許我們修改子元素的樣式以回應父元素的懸停。

此外，現代瀏覽器支援多種可以修改子元素的 CSS 屬性，包括顏色、字體、背景和過渡。以下是一個例子來說明這個概念：

.parent {
  border: 1px dashed gray;
  padding: 0.5em;
  display: inline-block;
}

.child {
  border: 1px solid brown;
  margin: 1em;
  padding: 0.5em;
  transition: all 0.5s;
}

.parent:hover .child {
  background: #cef;
  transform: scale(1.5) rotate(3deg);
  border: 5px inset brown;
}

<div class="parent">
  parent
  <div class="child">
    child
  </div>
</div>

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