如何仅为当前hover元素添加外轮廓且不触发父元素样式及圆角外轮廓实现

1. 仅当前hover元素触发外轮廓的纯CSS实现 #

核心使用CSS的:has()选择器实现逻辑：当元素存在被hover的子元素时，取消自身的hover样式，无需任何JS代码。
你只需要将原代码中3个带hover的选择器，修改为:hover:not(:has(*:hover))格式即可，修改后的对应CSS片段：

/* 仅hover到元素自身、而非子元素时触发样式 */
#clockOuterCircle:hover:not(:has(*:hover)) {
  box-shadow: 0 0 0 4px rgba(119, 239, 255, 0.5);
}

#clockInnerCircle:hover:not(:has(*:hover)) {
  box-shadow: 0 0 0 4px rgba(119, 239, 255, 0.5);
}

#clockStyleCircle:hover:not(:has(*:hover)) {
  box-shadow: 0 0 0 4px rgba(119, 239, 255, 0.5);
}

该方案兼容性覆盖Chrome 105+、Edge 105+、Safari 15.4+，覆盖95%以上的全球用户。

如果需要兼容更低版本浏览器，可以用极简JS实现，无需给每个元素加行内事件：

// 只需要加这段脚本即可
const hoverElms = document.querySelectorAll('#clockOuterCircle, #clockInnerCircle, #clockStyleCircle')
hoverElms.forEach(elm => {
  elm.addEventListener('mouseover', e => {
    e.stopPropagation()
    hoverElms.forEach(el => el.classList.remove('hover-active'))
    elm.classList.add('hover-active')
  })
  elm.addEventListener('mouseout', () => elm.classList.remove('hover-active'))
})

同时把原来的:hover样式替换为类样式：

.hover-active {
  box-shadow: 0 0 0 4px rgba(119, 239, 255, 0.5);
}

2. 带圆角外轮廓的最优实现建议 #

原生outline属性不支持适配border-radius，私有属性-moz-outline-radius仅火狐支持，兼容性极差不推荐使用。你当前使用的box-shadow扩散模拟外轮廓是目前行业通用的最优方案：

• 天生适配元素的border-radius属性，圆角元素会自动生成对应圆角的外轮廓
• 不占用布局空间，和原生outline表现完全一致
• 可灵活调整粗细、颜色、透明度，还可以通过多层阴影模拟outline-offset的间隙效果：
  比如需要外轮廓和元素之间有2px的白色间隙，可以这么写：

box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(119, 239, 255, 0.5);

完整修改后代码（纯CSS方案版） #

#clockOuterCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42vw;
  height: 42vw;
  margin: auto;
  border-radius: 50%;
  border: 4px solid rgb(255, 62, 62);
  background-color: rgb(253, 133, 133);
  user-select: none;
}

#clockOuterCircle:hover:not(:has(*:hover)) {
  box-shadow: 0 0 0 4px rgba(119, 239, 255, 0.5);
}

#clockInnerCircle {
  position: relative;
  width: 38vw;
  height: 38vw;
  text-align: center;
  padding: 0%;
  border-radius: 50%;
  border: 6px solid black;
  background-color: white;
}

#clockInnerCircle:hover:not(:has(*:hover)) {
  box-shadow: 0 0 0 4px rgba(119, 239, 255, 0.5);
}

#clockStyleCircle {
  position: absolute;
  width: 16vw;
  height: 16vw;
  text-align: center;
  padding: 0%;
  top: 28.5%;
  left: 28.5%;
  border-radius: 50%;
  border: 3px solid black;
  background-color: rgb(255, 233, 35);
}

#clockStyleCircle:hover:not(:has(*:hover)) {
  box-shadow: 0 0 0 4px rgba(119, 239, 255, 0.5);
}

#clockStyleEyeCircle1 {
  position: absolute;
  width: 4vw;
  height: 4vw;
  top: 24%;
  left: 10%;
  border: 3px solid black;
  border-radius: 50%;
  box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
  background-color: black;
}

#clockStyleEyeCircle2 {
  position: absolute;
  width: 4vw;
  height: 4vw;
  top: 24%;
  left: 65%;
  border: 3px solid black;
  border-radius: 50%;
  box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
  background-color: black;
}

#clockStyleSimileCircle {
  position: absolute;
  width: 8vw;
  height: 3vw;
  top: 68%;
  left: 25%;
  border: 3px solid rgb(36, 36, 36);
  border-bottom-left-radius: 100% 200%;
  border-bottom-right-radius: 100% 200%;
  background-color: black;
  box-shadow: inset 0px 1.5vw 1px 0.1vh rgb(255, 86, 86);
}

#clockCenterDot {
  position: absolute;
  width: 4%;
  height: 4%;
  top: 48%;
  left: 48%;
  border-radius: 50%;
  background-color: rgba(0, 0, 0);
  box-shadow: 3px 3px 10px;
  z-index: 4;
}

#hourNeedle {
  position: absolute;
  height: 30%;
  width: 2%;
  top: 20%;
  left: 49%;
  background-color: rgb(0, 0, 0);
  border-radius: 5px 5px 0 0;
  box-shadow: 3px 3px 10px;
  z-index: 1;
}

#minuteNeedle {
  position: absolute;
  height: 38%;
  width: 1.6%;
  top: 12%;
  left: 49.2%;
  background-color: rgba(0, 0, 0);
  border-radius: 5px 5px 0 0;
  box-shadow: 3px 3px 10px;
  z-index: 2;
}

#secondNeedle {
  position: absolute;
  height: 46%;
  width: 1%;
  top: 8%;
  left: 49.5%;
  background-color: rgba(0, 0, 0);
  border-radius: 5px 5px 0 0;
  box-shadow: 3px 3px 10px;
  z-index: 3;
}

<div id="clockOuterCircle">
  <div id="clockInnerCircle">
    <div id="clockStyleCircle">
    </div>
    <div id="clockCenterDot"></div>
  </div>
</div>

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