如何为按钮组按钮添加hover边框并避免出现双重边框？

问题分析 #

你的方案核心思路没问题，但存在两个痛点：一是按钮悬停时的轻微跳动，源于元素盒模型未锁定边框尺寸；二是Firefox旧版本不支持:has()伪类，导致悬停中间按钮时左右相邻边框无法正确透明化，出现双重边框。

方案一：纯CSS兼容新版浏览器（Firefox 121+） #

修复跳动问题，同时优化:has()逻辑确保Firefox新版正常工作：

.container {
  display: flex;
}

button {
  margin: 0;
  border: 1px solid black;
  display: block;
  font-size: 4rem;
  /* 锁定盒模型，边框不改变元素尺寸，解决跳动 */
  box-sizing: border-box;
}

.main {
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}

.main:hover, .first:hover, .last:hover {
  border-color: blue;
}

.main:hover ~ .last {
  border-left: 1px solid transparent;
}

/* Firefox 121+已支持:has，确保此选择器生效 */
.first:has(~ .main:hover) {
  border-right: 1px solid transparent;
}

方案二：JS辅助兼容全浏览器（含旧版Firefox） #

通过JS监听中间按钮的悬停状态，给左侧按钮添加/移除类，替代:has()伪类的功能：

CSS 代码

.container {
  display: flex;
}

button {
  margin: 0;
  border: 1px solid black;
  display: block;
  font-size: 4rem;
  box-sizing: border-box; /* 解决跳动 */
}

.main {
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}

.main:hover, .first:hover, .last:hover {
  border-color: blue;
}

.main:hover ~ .last {
  border-left: 1px solid transparent;
}

/* 替代:has的类选择器 */
.first.main-adjacent-hover {
  border-right: 1px solid transparent;
}

HTML 代码

<div class="container">
    <button class="first">1</button>
    <button class="main">
        Main button
    </button>
    <button class="last">2</button>
</div>

JS 代码

const mainBtn = document.querySelector('.main');
const firstBtn = document.querySelector('.first');

// 监听中间按钮的悬停事件
mainBtn.addEventListener('mouseenter', () => {
  firstBtn.classList.add('main-adjacent-hover');
});

mainBtn.addEventListener('mouseleave', () => {
  firstBtn.classList.remove('main-adjacent-hover');
});

额外说明 #

• 方案一无需JS，但要求Firefox版本≥121（2023年12月发布），适合现代浏览器环境；
• 方案二兼容所有主流浏览器（包括旧版Firefox），逻辑简单稳定，无兼容性风险；
• box-sizing: border-box是解决按钮跳动的关键，它让边框尺寸包含在元素自身宽高中，避免渲染时的布局偏移。

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