鼠标悬停高亮同类元素：CSS实现同类元素联动效果

本文将介绍如何使用CSS实现鼠标悬停在一个元素上时，高亮显示所有具有相同CSS类的元素，从而达到一种联动效果。我们将探讨两种CSS选择器方案，并提供代码示例，帮助你轻松实现类似Elementor WordPress中的Zoom In鼠标悬停效果。

利用CSS实现同类元素联动高亮

在网页设计中，为了提升用户体验，我们经常需要实现一些交互效果。其中，鼠标悬停效果是一种常见的交互方式。本文将探讨如何利用CSS，在鼠标悬停在一个元素上时，同时高亮显示所有具有相同CSS类的元素，从而实现一种联动效果。

核心思路：CSS选择器

实现这种效果的关键在于使用合适的CSS选择器。我们需要找到一种方式，当鼠标悬停在一个特定元素上时，能够选中所有具有相同CSS类的元素。以下介绍两种常用的CSS选择器方案：

立即学习“前端免费学习笔记（深入）”；

方案一：子元素选择器 (Child Selector)

这种方案适用于目标元素是鼠标悬停元素的子元素的情况。

.item:hover .wrapper {
    color: #fff;
    background-color: #000;
}

在这个例子中，.item 是鼠标悬停的元素，.wrapper 是需要高亮的元素，并且 .wrapper 是 .item 的子元素。 当鼠标悬停在 .item 上时，所有 .item 元素下的 .wrapper 元素的文字颜色会变成白色，背景颜色会变成黑色。

示例：

  Hover me!
  
This will be highlighted



  Another Hover me!
  
This will also be highlighted

方案二：相邻兄弟选择器 (Adjacent Sibling Selector)

魔珐星云

无需昂贵GPU，一键解锁超写实/二次元等多风格3D数字人，跨端适配千万级并发的具身智能平台。

下载

这种方案适用于目标元素是鼠标悬停元素的相邻兄弟元素的情况。

.item:hover ~ .wrapper {
    color: #fff;
    background-color: #000;
}

在这个例子中，.item 是鼠标悬停的元素，.wrapper 是需要高亮的元素，并且 .wrapper 是 .item 的后续兄弟元素。 当鼠标悬停在 .item 上时，所有 .item 元素之后的 .wrapper 元素的文字颜色会变成白色，背景颜色会变成黑色。 注意：.wrapper 必须是 .item 的后续兄弟元素，才能生效。

示例：

Hover me!
This will be highlighted

Another Hover me!
This will also be highlighted

注意事项：

• 选择合适的CSS选择器取决于你的HTML结构。 仔细分析你的HTML结构，选择最合适的选择器。
• 上述示例只是简单的颜色变化，你可以根据实际需求，修改CSS属性，例如改变大小、透明度、动画等。 例如，实现Zoom In效果，可以使用 transform: scale(1.1);。
• 如果需要更复杂的交互效果，可能需要结合JavaScript来实现。

实现Zoom In效果示例：

.pricing-table:hover {
  transform: scale(1.1); /* 放大1.1倍 */
  transition: transform 0.3s ease-in-out; /* 添加过渡动画 */
}

.pricing-table {
    transition: transform 0.3s ease-in-out; /* 确保鼠标移开时也有动画 */
}

在这个例子中，.pricing-table 是指定价表格的CSS类。 当鼠标悬停在 .pricing-table 上时，它会放大1.1倍，并且有一个平滑的过渡动画。

总结：

通过合理运用CSS选择器，我们可以轻松实现鼠标悬停高亮同类元素的效果，为网页增加互动性和视觉吸引力。 根据你的具体需求，选择合适的CSS选择器和属性，即可实现各种各样的鼠标悬停效果。