如何用CSS仅为鼠标悬停的单个后代元素添加轮廓？

你遇到的问题源于CSS的hover事件会沿DOM树向上冒泡，导致所有嵌套的祖先元素都会触发:hover选择器，从而同时显示outline。以下是两种可行的解决方案：

方案一：现代浏览器CSS方案（使用:has()选择器） #

通过:has()检测元素是否包含被hover的子元素，若存在则取消自身的outline，确保只有鼠标直接悬停的元素显示高亮：

.container *:hover {
   outline: 1px dashed black;
   font: sans-serif;
   white-space: pre;
}
/* 当元素有子元素被hover时，移除自身的outline */
.container *:has(:hover) {
   outline: none;
}

/* 保留原有代码高亮样式 */
.hljs-tag {
    color: #333;
}
.hljs {
    background: #fff;
    color: #333;
}
.hljs-name, .hljs-section {
    color: #63a35c;
}
.hljs-attr, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-selector-pseudo, .hljs-title {
    color: #6f42c1;
}

方案二：兼容旧浏览器的JavaScript方案 #

如果需要支持不兼容:has()的旧浏览器，可以通过JavaScript精确控制单个元素的高亮状态：

<pre class="container">
  <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;Rectangle_1&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">rect</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;Rectangle_1&quot;</span> <span class="hljs-attr">rx</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">ry</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">x</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">y</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;212&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;119&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">rect</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
</pre>

<style>
  /* 自定义hover高亮类 */
  .container .hover-outline {
     outline: 1px dashed black;
     font: sans-serif;
     white-space: pre;
  }

  /* 保留原有代码高亮样式 */
  .hljs-tag {
      color: #333;
  }
  .hljs {
      background: #fff;
      color: #333;
  }
  .hljs-name, .hljs-section {
      color: #63a35c;
  }
  .hljs-attr, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-selector-pseudo, .hljs-title {
      color: #6f42c1;
  }
</style>

<script>
  const container = document.querySelector('.container');
  const allElements = container.querySelectorAll('*');
  
  allElements.forEach(el => {
    el.addEventListener('mouseover', () => {
      // 清除所有元素的高亮状态
      allElements.forEach(item => item.classList.remove('hover-outline'));
      // 给当前悬停的元素添加高亮
      el.classList.add('hover-outline');
    });
    
    el.addEventListener('mouseout', () => {
      el.classList.remove('hover-outline');
    });
  });
</script>

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