當父元素懸停時如何設定子元素的樣式？-css教學-PHP中文網

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

Patricia Arquette

發布： 2024-11-29 13:11:10

原創

964 人瀏覽過

How Can I Style a Child Element When Its Parent is Hovered?

在父元素懸停時設定子元素的樣式

將滑鼠懸停在其父元素上時需要修改子元素的外觀嗎？輸入 CSS 強大的 :hover 選擇器。

要執行此操作：

.parent:hover .child {
  /* Styling for the child element when the parent is hovered */
}

登入後複製

使用此選擇器，當父元素「.parent」懸停時，您將定位子元素。後代組合器（空格）選擇與“.child”相符的後代。

例如：

.parent:hover .child {
  background-color: #ccc;
}

登入後複製

當滑鼠停留在父元素上時，子元素的背景會變成灰色。

實例：

<div class="parent">
  <p class="child">Hover me</p>
</div>

登入後複製

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

.child {
  background-color: white;
  padding: 0.5em;
  transition: all 0.5s;
}

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

登入後複製

此範例將子元素的背景變更為灰色並在父級懸停時稍微放大。

請記住，這裡涵蓋了您的瀏覽器支援。深入研究 CSS 並增強您的用戶體驗！

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