HTML高亮显示鼠标悬停元素的所有同类CSS类元素
在网页开发中，我们经常需要实现这样的交互效果：当用户将鼠标悬停在某个元素上时，页面中所有具有相同CSS类的元素都会被高亮显示。这种效果可以帮助用户快速识别页面中具有相同样式或功能的相关元素。
实现思路
要实现这个效果，我们需要：
为每个具有目标类的元素添加鼠标悬停事件监听器
当鼠标悬停在某个元素上时，获取该元素的CSS类名
遍历页面中的所有元素，找到具有相同CSS类的元素
为这些匹配的元素添加一个高亮样式
当鼠标离开元素时，移除高亮样式
完整代码示例
下面是一个完整的HTML文件，演示了如何实现鼠标悬停高亮同类元素的功能：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标悬停高亮同类元素</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
line-height: 1.6;
}
.highlight-item {
padding: 10px 15px;
margin: 5px;
background-color: #f0f0f0;
border-radius: 4px;
display: inline-block;
cursor: pointer;
transition: all 0.3s ease;
}
.highlight {
background-color: #ffeb3b !important;
box-shadow: 0 0 10px rgba(255, 235, 59, 0.7);
transform: scale(1.05);
}
h2 {
color: #333;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.container {
margin: 20px 0;
}
</style>
</head>
<body>
<h1>鼠标悬停高亮同类元素示例</h1>
<div class="container">
<h2>类别 A</h2>
<div class="highlight-item category-a">项目 A1</div>
<div class="highlight-item category-a">项目 A2</div>
<div class="highlight-item category-a">项目 A3</div>
</div>
<div class="container">
<h2>类别 B</h2>
<div class="highlight-item category-b">项目 B1</div>
<div class="highlight-item category-b">项目 B2</div>
<div class="highlight-item category-b">项目 B3</div>
</div>
<div class="container">
<h2>类别 C</h2>
<div class="highlight-item category-c">项目 C1</div>
<div class="highlight-item category-c">项目 C2</div>
<div class="highlight-item category-c">项目 C3</div>
</div>
<script>
// 获取所有需要监听的元素
const highlightItems = document.querySelectorAll('.highlight-item');
// 为每个元素添加鼠标悬停事件
highlightItems.forEach(item => {
item.addEventListener('mouseenter', function() {
// 获取当前元素的类别
const classes = this.className.split(' ');
let targetClass = '';
// 查找除了'highlight-item'之外的类别
for (let cls of classes) {
if (cls !== 'highlight-item') {
targetClass = cls;
break;
}
}
if (targetClass) {
// 找到所有具有相同类别的元素并添加高亮类
const sameCategoryItems = document.querySelectorAll(`.${targetClass}`);
sameCategoryItems.forEach(el => {
el.classList.add('highlight');
});
}
});
item.addEventListener('mouseleave', function() {
// 移除所有高亮类
highlightItems.forEach(el => {
el.classList.remove('highlight');
});
});
});
</script>
</body>
</html>代码解析
HTML结构
我们创建了三个类别（A、B、C），每个类别包含三个项目。所有项目都具有highlight-item类用于基本样式，同时每个类别的项目还有自己的特定类（category-a、category-b、category-c）。
CSS样式
.highlight-item：定义基本样式，包括背景色、内边距、圆角等.highlight：定义高亮样式，包括黄色背景、阴影效果和轻微的放大效果使用
!important确保高亮样式能够覆盖其他样式添加了过渡效果使高亮变化更加平滑
JavaScript逻辑
首先获取所有具有
highlight-item类的元素为每个元素添加
mouseenter事件监听器：获取元素的类名并找出特定的类别类
使用
document.querySelectorAll找到所有具有相同类别的元素为这些元素添加
highlight类为每个元素添加
mouseleave事件监听器：从所有
highlight-item元素中移除highlight类
扩展应用
这个基础实现可以进一步扩展：
可以添加多个CSS类的高亮支持
可以实现更复杂的高亮效果，如边框闪烁、颜色渐变等
可以结合CSS变量实现动态高亮颜色
可以添加键盘导航支持，使该功能对无障碍访问更友好
通过这种方法，我们可以创建直观的用户界面，帮助用户更好地理解页面结构和元素之间的关系。