如何实现鼠标悬停或点击某元素时高亮对应关联元素？

核心实现逻辑 #

• 采用事件委托绑定全局监听，不用单独给每个元素绑定事件，同时兼容后续动态生成的元素
• 给关联元素设置统一的自定义属性data-inspector-group，相同属性值的元素判定为关联元素
• 单独定义高亮样式类，触发事件时批量给同分组的关联元素添加/移除样式类，实现同步高亮效果
• 额外设置点击锁定逻辑，点击元素后高亮状态不受鼠标移动影响，再次点击同分组元素取消锁定

代码实现示例 #

CSS 高亮样式 #

.inspector-highlight {
  /* 用outline不影响元素原有布局 */
  outline: 2px solid #1677ff !important;
  outline-offset: 1px !important;
  background-color: rgba(22, 119, 255, 0.1) !important;
  transition: all 0.1s ease !important;
  z-index: 99999;
}

JS 交互逻辑 #

// 存储当前点击锁定的分组ID
let lockedGroupId = null

// 悬停高亮逻辑
document.addEventListener('mouseover', (e) => {
  // 已锁定分组时不触发悬停高亮切换
  if (lockedGroupId) return
  // 清空之前的所有高亮状态
  document.querySelectorAll('.inspector-highlight').forEach(el => el.classList.remove('inspector-highlight'))
  const currentGroup = e.target.dataset.inspectorGroup
  if (!currentGroup) return
  // 给同分组所有关联元素加高亮
  document.querySelectorAll(`[data-inspector-group="${currentGroup}"]`).forEach(el => {
    el.classList.add('inspector-highlight')
  })
})

// 点击锁定高亮逻辑
document.addEventListener('click', (e) => {
  const currentGroup = e.target.dataset.inspectorGroup
  // 点击已锁定的同分组元素，取消锁定
  if (currentGroup === lockedGroupId) {
    lockedGroupId = null
    document.querySelectorAll('.inspector-highlight').forEach(el => el.classList.remove('inspector-highlight'))
    return
  }
  // 锁定新的分组高亮
  lockedGroupId = currentGroup
  document.querySelectorAll('.inspector-highlight').forEach(el => el.classList.remove('inspector-highlight'))
  if (!currentGroup) return
  document.querySelectorAll(`[data-inspector-group="${currentGroup}"]`).forEach(el => {
    el.classList.add('inspector-highlight')
  })
  e.stopImmediatePropagation()
})

优化建议 #

• 可以额外添加一个悬浮信息层，展示当前选中元素的标签名、类名、分组ID等信息，更贴近Chrome inspector的使用体验
• 如果页面嵌套了iframe，需要单独给iframe的contentDocument绑定相同的监听事件，才能识别iframe内部的元素
• 避免给html、body等根节点设置关联分组属性，防止触发全页高亮影响体验

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