如何使用CSS同時對多個元素套用懸停效果？-css教學-PHP中文網

如何使用CSS同時對多個元素套用懸停效果？

Mary-Kate Olsen

發布： 2024-11-27 07:46:10

原創

382 人瀏覽過

How Can I Use CSS to Apply Hover Effects to Multiple Elements Simultaneously?

懸停在元素上，CSS 中對多個元素的效果

在HTML 佈局中，您可能會遇到懸停在元素上應觸發的場景對多個相關元素的影響。考慮以下 HTML 程式碼：

<div class="section">
  <div class="image"><img src="myImage.jpg" /></div>
  <div class="layer">Lorem Ipsum</div>
</div>

登入後複製

「image」和「layer」類別的正常狀態和懸停狀態都有不同顏色的邊框。目標是當滑鼠懸停在「layer」元素上時，兩個元素的邊框顏色都會發生變化，反之亦然。

CSS 解決方案：

無需 JavaScript 即可實現此效果可以使用CSS。這是一個範例：

HTML:

<div class="section">
    <img src="myImage.jpg" />
    <div class="layer">Lorem Ipsum</div>
</div>

登入後複製

CSS:

.section {
    background: #ccc;
}

.layer {
    background: #ddd;
}

.section:hover img {
    border: 2px solid #333;
}

.section:hover .layer {
    border: 2px solid #F90;
}

登入後複製

CSS:

“.section:hover img”選擇器指定當“.section”元素懸停在其上時，其中的“img”元素應該有一個 2px 實心邊框，顏色為 #333。

同樣，「 .section:hover .layer」選擇器以「.section」內的「.layer」元素為目標，並將其邊框顏色變更為 #F90懸停。此CSS 可確保當您將滑鼠懸停在「layer」元素上時，「image」和「layer」元素的邊框顏色都會更新，無需任何腳本即可創建所需的效果。

以上是如何使用CSS同時對多個元素套用懸停效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！