CSS实现button:active状态下HR元素同步变色的方法咨询

方案1：纯CSS实现（仅按住鼠标时生效） #

前提条件 #

需要先调整你的HTML结构，把所有导航按钮包裹在同一个父容器内，结构参考：

<nav id="nav-container">
  <button class="nav-buttons">导航1</button>
  <button class="nav-buttons">导航2</button>
  <button class="nav-buttons">导航3</button>
  <button class="nav-buttons">导航4</button>
</nav>
<hr id="hr-nav">

新增CSS规则 #

在你现有CSS的基础上添加以下代码即可：

/* 导航容器处于激活状态时，后续的分隔线同步变为红色 */
#nav-container:active ~ #hr-nav {
  border-color: red;
}

这个方案的效果逻辑和你现有的:active状态完全一致：按住导航按钮不松开时分隔线变红，松开鼠标后自动恢复为白色。

方案2：JS实现（点击后持续保持红色） #

如果你需要点击按钮后分隔线一直保持红色，直到触发其他复位逻辑，可以用JS实现，代码如下：

// 获取所有导航按钮和分隔线元素
const navBtns = document.querySelectorAll('.nav-buttons')
const navHr = document.getElementById('hr-nav')

// 给每个按钮绑定点击事件
navBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    navHr.style.borderColor = 'red'
  })
})

// 可选扩展：点击页面其他位置时分隔线恢复白色
document.addEventListener('click', (e) => {
  if(!e.target.closest('.nav-buttons')) {
    navHr.style.borderColor = 'white'
  }
})

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