高亮显示鼠标悬停元素的所有同类 CSS 类元素-html教程-PHP中文网

高亮显示鼠标悬停元素的所有同类 CSS 类元素

碧海醫心

发布： 2025-09-27 11:56:11

原创

443人浏览过

高亮显示鼠标悬停元素的所有同类 css 类元素

正如摘要所述，本文将深入探讨如何利用 JavaScript 和 CSS 在网页中实现一种交互式效果：当鼠标悬停在一个元素上时，所有具有相同 CSS 类的元素都会被高亮显示，例如添加缩放效果。这种效果可以增强用户体验，突出显示相关信息。

实现原理

核心思路是利用 JavaScript 监听鼠标悬停事件（mouseover 和 mouseout），并在事件触发时，通过 JavaScript 动态修改与当前悬停元素具有相同 CSS 类的所有元素的样式。同时，利用 CSS 的 transform: scale() 属性实现缩放效果。

具体步骤

HTML 结构： 首先，确保你需要应用效果的元素都具有相同的 CSS 类。例如，如果你想让所有定价表的“用户数”列在鼠标悬停时高亮显示，那么所有这些列都应该具有相同的类名，比如 user-count。

<div class="pricing-table">
  <div class="user-count">10 Users</div>
  <div class="dashboard-count">5 Dashboards</div>
</div>

<div class="pricing-table">
  <div class="user-count">20 Users</div>
  <div class="dashboard-count">10 Dashboards</div>
</div>

<div class="pricing-table">
  <div class="user-count">50 Users</div>
  <div class="dashboard-count">25 Dashboards</div>
</div>

登录后复制

CSS 样式： 定义默认样式和悬停时的样式。默认样式保持不变，悬停时的样式使用 transform: scale() 实现缩放效果，并可以添加其他样式，例如背景颜色改变。

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

腾讯元宝
腾讯混元平台推出的AI助手

223

查看详情
```
.user-count {
  /* 默认样式 */
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

.user-count.highlighted {
  /* 悬停时的样式 */
  transform: scale(1.2); /* 放大1.2倍 */
  background-color: #f0f0f0; /* 改变背景颜色 */
}
```
登录后复制
JavaScript 代码： 编写 JavaScript 代码来监听鼠标悬停事件，并添加/移除 highlighted 类。
```
const userCounts = document.querySelectorAll('.user-count');

userCounts.forEach(userCount => {
  userCount.addEventListener('mouseover', () => {
    userCounts.forEach(uc => uc.classList.add('highlighted'));
  });

  userCount.addEventListener('mouseout', () => {
    userCounts.forEach(uc => uc.classList.remove('highlighted'));
  });
});
```
登录后复制
代码解释：
- document.querySelectorAll('.user-count')：选择所有类名为 user-count 的元素。
- forEach 循环遍历所有选中的元素。
- addEventListener('mouseover', ...)：为每个元素添加鼠标悬停事件监听器。
- addEventListener('mouseout', ...)：为每个元素添加鼠标移开事件监听器。
- uc.classList.add('highlighted')：为所有类名为 user-count 的元素添加 highlighted 类。
- uc.classList.remove('highlighted')：为所有类名为 user-count 的元素移除 highlighted 类。

完整示例

<!DOCTYPE html>
<html>
<head>
  <title>Hover Highlight Example</title>
  <style>
    .user-count {
      transition: transform 0.3s ease;
    }

    .user-count.highlighted {
      transform: scale(1.2);
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>

  <div class="pricing-table">
    <div class="user-count">10 Users</div>
    <div class="dashboard-count">5 Dashboards</div>
  </div>

  <div class="pricing-table">
    <div class="user-count">20 Users</div>
    <div class="dashboard-count">10 Dashboards</div>
  </div>

  <div class="pricing-table">
    <div class="user-count">50 Users</div>
    <div class="dashboard-count">25 Dashboards</div>
  </div>

  <script>
    const userCounts = document.querySelectorAll('.user-count');

    userCounts.forEach(userCount => {
      userCount.addEventListener('mouseover', () => {
        userCounts.forEach(uc => uc.classList.add('highlighted'));
      });

      userCount.addEventListener('mouseout', () => {
        userCounts.forEach(uc => uc.classList.remove('highlighted'));
      });
    });
  </script>

</body>
</html>

登录后复制

注意事项

性能优化： 如果需要处理大量元素，频繁的类名添加和移除可能会影响性能。可以考虑使用节流（throttle）或防抖（debounce）技术来优化事件处理函数。
CSS 选择器： 可以使用更精确的 CSS 选择器来避免影响到其他不需要高亮显示的元素。
过渡效果： 使用 CSS transition 属性可以添加平滑的过渡效果，使高亮显示更加自然。
可访问性： 确保高亮显示效果不会影响页面的可访问性。例如，如果改变了颜色，要确保对比度足够，方便用户识别。

总结

通过结合 JavaScript 和 CSS，我们可以轻松实现鼠标悬停时高亮显示所有具有相同 CSS 类的元素的效果。这种效果可以增强用户体验，突出显示相关信息。在实际应用中，需要注意性能优化和可访问性，以确保最佳的用户体验。记住，清晰的HTML结构，精确的CSS样式，以及高效的JavaScript代码是实现这一效果的关键。

以上就是高亮显示鼠标悬停元素的所有同类 CSS 类元素的详细内容，更多请关注php中文网其它相关文章！