咨询：仅用原生CSS实现两元素联动hover效果的更优方案

核心需求回顾 #

• 初始状态：#last-btn 黑底白字，#first-btn 透明底黑字
• Hover触发：鼠标悬停在#first-btn上时，#first-btn保持黑底白字，#last-btn切换为透明底黑字

简洁实现代码 #

HTML结构

<div class="btn-container">
  <button id="first-btn">第一个按钮</button>
  <button id="last-btn">第二个按钮</button>
</div>

CSS代码

/* 统一基础样式，避免布局跳动 */
button {
  border: 1px solid #000;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s; /* 可选：添加过渡动画让切换更流畅 */
}

/* 初始状态设置 */
#first-btn {
  background: transparent;
  color: #000;
}

#last-btn {
  background: #000;
  color: #fff;
}

/* 联动Hover效果 */
#first-btn:hover {
  background: #000;
  color: #fff;
}

#first-btn:hover ~ #last-btn {
  background: transparent;
  color: #000;
}

方案说明 #

• 用通用兄弟选择器(~)实现跨元素联动，只要两个按钮处于同一父容器下，且#first-btn在#last-btn之前即可生效
• 统一设置按钮边框，避免hover时元素尺寸变化导致布局跳动
• 可选添加transition属性，让样式切换更平滑
• 完全基于原生CSS，无第三方依赖，代码简洁易维护

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