如何用JS实现hover时为共享相同项目类名的多元素添加faux-hover类

实现效果说明 #

当任意项目卡片触发hover事件时，所有和该卡片属于同一项目（共享相同项目标识类名）的卡片，会同步添加faux-hover类实现联动高亮效果。

参考DOM结构 #

<div class="project red"> 项目红卡片1 </div>
<div class="project blue"> 项目蓝卡片1 </div>
<div class="project green"> 项目绿卡片1 </div>
<div class="project red"> 项目红卡片2 </div>
<div class="project red"> 项目红卡片3 </div>
<div class="project blue"> 项目蓝卡片2 </div>
<div class="project green"> 项目绿卡片2 </div>
<div class="project blue"> 项目蓝卡片3 </div>

实现代码 #

1. CSS样式示例 #

.project {
  width: 100px;
  height: 100px;
  margin: 10px;
  float: left;
  border: 2px solid #eee;
  transition: all 0.3s ease;
}
/* 关联hover高亮样式 */
.project.faux-hover {
  border-color: #f00;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.red { background: rgba(255,0,0,0.2); }
.blue { background: rgba(0,0,255,0.2); }
.green { background: rgba(0,255,0,0.2); }

2. 原生JavaScript实现 #

// 获取所有项目卡片
const projectCards = document.querySelectorAll('.project');

projectCards.forEach(card => {
  // 鼠标移入事件
  card.addEventListener('mouseenter', () => {
    // 提取当前卡片的项目标识类名（过滤掉通用类project和状态类faux-hover）
    const projectClass = Array.from(card.classList).filter(cls => cls !== 'project' && cls !== 'faux-hover')[0];
    // 给所有同项目的卡片添加faux-hover类
    document.querySelectorAll(`.project.${projectClass}`).forEach(el => {
      el.classList.add('faux-hover');
    });
  });
  // 鼠标移出事件
  card.addEventListener('mouseleave', () => {
    const projectClass = Array.from(card.classList).filter(cls => cls !== 'project' && cls !== 'faux-hover')[0];
    // 移除所有同项目卡片的faux-hover类
    document.querySelectorAll(`.project.${projectClass}`).forEach(el => {
      el.classList.remove('faux-hover');
    });
  });
});

3. jQuery 简化实现 #

如果项目已经引入jQuery，可以用更短的代码实现：

$('.project').hover(function() {
  const projectClass = Array.from(this.classList).filter(cls => cls !== 'project' && cls !== 'faux-hover')[0];
  $(`.project.${projectClass}`).addClass('faux-hover');
}, function() {
  const projectClass = Array.from(this.classList).filter(cls => cls !== 'project' && cls !== 'faux-hover')[0];
  $(`.project.${projectClass}`).removeClass('faux-hover');
});

注意事项 #

如果一个项目卡片有多个自定义标识类，可以调整类名过滤逻辑，比如统一给项目标识类加固定前缀（如project-red），过滤的时候匹配前缀即可；也可以用data-*属性存项目ID替代类名匹配，逻辑更清晰，示例如下：

<div class="project" data-project-id="red"> 项目红卡片1 </div>

对应的JS获取逻辑改为const projectId = card.dataset.projectId，选择器改为.project[data-project-id="${projectId}"]即可。

内容的提问来源于stack exchange，提问作者Jaguilar