实现鼠标悬停仅对光标指向的精确元素添加CSS边框

我完全懂你的困扰——动态生成的HTML、不知道元素类名，CSS的:hover又会把样式套到所有祖先元素上，确实头疼。下面给你两个实用的解决方案，亲测有效：

方案一：利用mouseenter/mouseleave事件（无冒泡特性） #

因为mouseenter和mouseleave不会像mouseover/mouseout那样冒泡，所以当鼠标进入某个元素时，只有这个元素会触发事件，祖先元素不会跟着响应。结合MutationObserver监听动态生成的DOM，就能自动给新元素绑定事件：

// 定义添加/移除border的函数
const addHoverBorder = (element) => {
  element.style.border = '2px solid red'; // 换成你需要的样式
};

const removeHoverBorder = (element) => {
  element.style.border = '';
};

// 给元素绑定悬停事件
const bindHoverEvents = (element) => {
  element.addEventListener('mouseenter', () => addHoverBorder(element));
  element.addEventListener('mouseleave', () => removeHoverBorder(element));
};

// 给现有所有元素绑定事件
document.querySelectorAll('*').forEach(bindHoverEvents);

// 监听DOM变化，自动给新生成的元素绑定事件
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    mutation.addedNodes.forEach((node) => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        bindHoverEvents(node);
        // 给新元素的子元素也绑定事件
        node.querySelectorAll('*').forEach(bindHoverEvents);
      }
    });
  });
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});

这个方案的好处是精准度拉满，每个元素的悬停事件独立触发，完全不会影响祖先元素。

方案二：用mouseover事件+阻止冒泡+样式重置 #

如果你不想用MutationObserver，也可以用事件委托监听document的mouseover事件，只给当前鼠标指向的元素（event.target）加样式，同时移除其他元素的border：

document.addEventListener('mouseover', (e) => {
  // 先清除所有元素的悬停border
  document.querySelectorAll('*').forEach(el => el.style.border = '');
  // 给精确悬停的元素添加border
  e.target.style.border = '2px solid red';
  // 阻止事件冒泡，避免祖先元素触发该事件
  e.stopPropagation();
});

document.addEventListener('mouseout', (e) => {
  // 移除当前元素的border
  e.target.style.border = '';
});

这个方案更简洁，但要注意：如果元素嵌套很深，mouseover触发时的样式重置可能会有轻微闪烁（不过一般不太明显）。另外，stopPropagation()能确保只有event.target会被处理。

补充说明：为什么CSS的:hover不行？ #

CSS的:hover是基于“鼠标是否在元素范围内”触发的，当鼠标在子元素上时，父元素的范围也包含这个点，所以父元素的:hover也会被触发——这是CSS的原生特性，没法直接通过CSS规则规避，必须用JavaScript来精确判断触发对象。

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