如何同时对多个 CSS 元素应用悬停效果？-css教程-PHP中文网

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

Mary-Kate Olsen

发布： 2024-11-26 08:47:14

原创

291 人浏览过

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

在 CSS 中跨多个元素应用悬停效果

将鼠标悬停在特定元素上时，您可能希望将效果应用于多个相关元素。例如，您有两个相邻的元素“图像”和“图层”，每个元素都有单独的边框。如何才能使鼠标悬停在一个元素上影响两个元素的边框颜色？

不使用 JavaScript 的解决方案

要在不使用 JavaScript 的情况下实现此目的，您可以使用 CSS像这样：

.section {
  background: #ccc;
}

.layer {
  background: #ddd;
}

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

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

登录后复制

在此示例中，当您将鼠标悬停在“.section”元素上时，其中的“img”将有一个2 像素实线边框，颜色为#333。同时，“.section”内的“.layer”元素也将收到一个 2px 实心边框，颜色为 #F90。当您将鼠标悬停在“.layer”元素上时，会发生相同的行为。

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