如何简化悬停显示按钮的代码以支持任意数量Box？

我希望实现鼠标悬停在Box元素上时显示对应的Btn按钮，移出时隐藏按钮。目前我通过onmouseover和onmouseout事件结合多个JavaScript函数实现了该功能，但仅3个Box就编写了大量重复代码，现在想要添加更多Box，请问如何简化代码以适配任意数量的Box？

当前实现代码：

JavaScript #

function showBTN_A() {
  var a = document.getElementsByClassName("Btn");
  a[0].style.display = "block";
  a[1].style.display = "none";
  a[2].style.display = "none";
}

function showBTN_B() {
  var a = document.getElementsByClassName("Btn");
  a[0].style.display = "none";
  a[1].style.display = "block";
  a[2].style.display = "none";
}

function showBTN_C() {
  var a = document.getElementsByClassName("Btn");
  a[0].style.display = "none";
  a[1].style.display = "none";
  a[2].style.display = "block";
}

function hideBTN() {
  var a = document.getElementsByClassName("Btn");
  a[0].style.display = "none";
  a[1].style.display = "none";
  a[2].style.display = "none";
}

CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100vh;
  align-items: center;
}

.wrapper {
  display: flex;
  width: 90%;
  flex-direction: column;
}

.Box {
  width: 90%;
  margin: auto;
  height: 180px;
  background: blue;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Btn {
  background: white;
  border: none;
  color: blue;
  font-weight: bold;
  font-size: 20px;
  padding: 8px;
  display: none;
}

HTML #

<div class="wrapper">
  <div onmouseover="showBTN_A()" onmouseout="hideBTN()" class="Box">
    <button class="Btn">Click Here</button>
  </div>
  <div onmouseover="showBTN_B()" onmouseout="hideBTN()" class="Box">
    <button class="Btn">Click Here</button>
  </div>
  <div onmouseover="showBTN_C()" onmouseout="hideBTN()" class="Box">
    <button class="Btn">Click Here</button>
  </div>
</div>

方法一：纯CSS实现（推荐） #

利用CSS的:hover伪类直接控制子元素显示状态，完全不需要JavaScript，代码最简洁且易于扩展。

修改后代码 #

CSS（新增hover控制逻辑）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100vh;
  align-items: center;
}

.wrapper {
  display: flex;
  width: 90%;
  flex-direction: column;
}

.Box {
  width: 90%;
  margin: auto;
  height: 180px;
  background: blue;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Btn {
  background: white;
  border: none;
  color: blue;
  font-weight: bold;
  font-size: 20px;
  padding: 8px;
  display: none;
}

/* 鼠标悬停Box时显示内部Btn */
.Box:hover .Btn {
  display: block;
}

HTML（移除所有事件属性）

<div class="wrapper">
  <div class="Box">
    <button class="Btn">Click Here</button>
  </div>
  <div class="Box">
    <button class="Btn">Click Here</button>
  </div>
  <div class="Box">
    <button class="Btn">Click Here</button>
  </div>
  <!-- 可无限添加Box，无需修改任何代码 -->
</div>

优势：零JS代码、性能更好、新增Box仅需复制HTML结构、维护成本极低。

方法二：简化JavaScript实现 #

如果需要保留JS逻辑（比如后续扩展复杂交互），可以通过事件对象复用函数或事件委托来避免重复代码。

方案1：复用函数（基于事件对象） #

JavaScript

// 通用显示按钮函数
function showBtn(event) {
  // 获取当前悬停Box内的Btn
  const targetBtn = event.currentTarget.querySelector('.Btn');
  // 隐藏所有Btn
  document.querySelectorAll('.Btn').forEach(btn => btn.style.display = 'none');
  // 显示当前Box的Btn
  targetBtn.style.display = 'block';
}

// 通用隐藏按钮函数
function hideBtn() {
  document.querySelectorAll('.Btn').forEach(btn => btn.style.display = 'none');
}

HTML（统一绑定事件）

<div class="wrapper">
  <div onmouseover="showBtn(event)" onmouseout="hideBtn()" class="Box">
    <button class="Btn">Click Here</button>
  </div>
  <div onmouseover="showBtn(event)" onmouseout="hideBtn()" class="Box">
    <button class="Btn">Click Here</button>
  </div>
  <div onmouseover="showBtn(event)" onmouseout="hideBtn()" class="Box">
    <button class="Btn">Click Here</button>
  </div>
  <!-- 新增Box仅需复用事件绑定 -->
</div>

方案2：事件委托（更优） #

将事件绑定在父容器上，动态添加的Box也能自动生效，无需给每个Box单独绑定事件。

JavaScript

const wrapper = document.querySelector('.wrapper');

// 处理鼠标进入事件
wrapper.addEventListener('mouseover', (event) => {
  const box = event.target.closest('.Box');
  if (box) {
    // 隐藏所有Btn
    document.querySelectorAll('.Btn').forEach(btn => btn.style.display = 'none');
    // 显示当前Box的Btn
    box.querySelector('.Btn').style.display = 'block';
  }
});

// 处理鼠标离开事件
wrapper.addEventListener('mouseout', (event) => {
  if (event.target.closest('.Box')) {
    document.querySelectorAll('.Btn').forEach(btn => btn.style.display = 'none');
  }
});

HTML（无需任何事件属性）

<div class="wrapper">
  <div class="Box">
    <button class="Btn">Click Here</button>
  </div>
  <div class="Box">
    <button class="Btn">Click Here</button>
  </div>
  <div class="Box">
    <button class="Btn">Click Here</button>
  </div>
  <!-- 新增Box无需任何额外操作 -->
</div>

优势：减少事件绑定数量、动态添加的Box自动生效、性能更优。

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