如何仅使用 CSS 在多个元素上创建同步悬停效果？

实现多个元素的悬停效果

在Web开发中，经常会遇到多个元素需要响应悬停交互的场景。考虑以下 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 即可实现此目的可以使用：

.section {
  background: #ccc;
}

.layer {
  background: #ddd;
}

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

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

在此代码中：

• '.section' 类指定背景颜色。
• '.layer' 类定义 '.layer' 元素的背景颜色和边框宽度。
• '.section:hover img ' 规则会在 '.section' 悬停时更改图像的边框颜色。
• '.section:hover .layer' 规则修改边框相同悬停条件下“.layer”元素的颜色，确保两个元素都能响应“.layer”元素上的悬停交互。

此解决方案提供了一种创建同步悬停效果的优雅方法无需依赖脚本即可处理多个元素。

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