如何使用CSS同时对多个元素应用悬停效果？

悬停在元素上，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;
}

解释：

• “.section:hover img”选择器指定当“.section”元素悬停在其上时，其中的“img”元素应该有一个 2px 实心边框，颜色为 #333。
• 同样，“ .section:hover .layer”选择器以“.section”内的“.layer”元素为目标，并将其边框颜色更改为 #F90悬停。

此 CSS 可确保当您将鼠标悬停在“layer”元素上时，“image”和“layer”元素的边框颜色都会更新，无需任何脚本即可创建所需的效果。

以上是如何使用CSS同时对多个元素应用悬停效果？的详细内容。更多信息请关注PHP中文网其他相关文章！