當父元素懸停在其上時，如何設定子元素的樣式？

父級懸停時子元素的樣式

在各種情況下，當使用者將滑鼠懸停在其父元素上時，需要更改子元素的樣式。這主要可以透過 CSS 解決方案來實現，特別是利用 :hover 偽類選擇器。

例如，如果您希望當使用者將滑鼠懸停在面板上時更改面板內選項列的顏色，CSS 提供一個簡單的方法：

.parent:hover .child {
  /* Style for child element on hover */
}

此程式碼片段使用: hover 偽類別來指定樣式變更僅應在父元素(.parent) 時套用於子元素(.child)都懸停在上面。後代組合符（空格）允許我們選擇與子選擇器匹配的父元素的任何後代。

考慮這個實例：

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

.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;
}

此程式碼修改背景顏色、變換比例以及當父元素懸停在其上時調整子元素的內嵌邊框，展示了CSS 在這種情況下的有效性。

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