多下载按钮场景下实现悬停/点击显示镜像按钮的CSS方案求助

我来帮你搞定这个问题，刚好有两种实用方案，完全不会影响页面上其他的按钮，你可以根据自己的情况选：

方法一：调整HTML结构 + 纯CSS实现（无JS） #

因为CSS本身没有“选中前面元素”的选择器，所以我们可以给每个下载按钮和对应的镜像按钮套个独立容器，通过定位让镜像按钮显示在下载按钮上方，这样就能用CSS轻松控制显示隐藏了，而且每个组完全独立，不会互相干扰。

修改后的HTML结构 #

<h2>CSS Buttons</h2>
<!-- 每个下载组套一个容器 -->
<div class="download-group">
  <button class="download">Download</button>
  <div class="hideme">
    <button class="button">Mirror 1</button>
    <button class="button">Mirror 2</button>
    <button class="button">Mirror 3</button>
  </div>
</div>

<!-- 可以复制多个这样的组，互相不影响 -->
<div class="download-group">
  <button class="download">Download File 2</button>
  <div class="hideme">
    <button class="button">Mirror A</button>
    <button class="button">Mirror B</button>
    <button class="button">Mirror C</button>
  </div>
</div>

对应的CSS代码 #

/* 给容器设置相对定位，用来定位镜像按钮 */
.download-group {
  position: relative;
  display: inline-block; /* 让容器只占按钮的宽度 */
  margin: 10px 0; /* 给每个组留点间距 */
}

.download { 
  background-color: #4CAF50; 
  border: none; 
  color: white; 
  padding: 15px 32px; 
  text-align: center; 
  text-decoration: none; 
  font-size: 16px; 
  margin: 4px 2px; 
  cursor: pointer; 
}

.hideme { 
  display: none;
  position: absolute;
  bottom: 100%; /* 把镜像按钮放在下载按钮的正上方 */
  left: 0;
  margin-bottom: 8px; /* 和下载按钮之间留点空隙 */
}

/* 悬停容器时显示镜像按钮（悬停下载按钮也会触发，因为在容器里） */
.download-group:hover .hideme {
  display: block;
}

方法二：JavaScript事件委托（不改动原有HTML结构） #

如果不想调整现有的HTML结构，那就用事件委托来精准控制每个下载按钮对应的镜像区域，完全不会全局修改.hideme类，避免影响其他无关元素。

直接添加这段JS代码 #

// 监听鼠标进入下载按钮的事件
document.addEventListener('mouseenter', function(e) {
  // 确认触发事件的是下载按钮
  if (e.target.classList.contains('download')) {
    // 找到当前下载按钮前面紧邻的.hideme元素
    const targetMirror = e.target.previousElementSibling;
    if (targetMirror && targetMirror.classList.contains('hideme')) {
      targetMirror.style.display = 'block';
    }
  }
}, true);

// 监听鼠标离开下载按钮的事件
document.addEventListener('mouseleave', function(e) {
  if (e.target.classList.contains('download')) {
    const targetMirror = e.target.previousElementSibling;
    if (targetMirror && targetMirror.classList.contains('hideme')) {
      targetMirror.style.display = 'none';
    }
  }
}, true);

这个方法的原理是通过事件委托监听整个文档的鼠标事件，只对.download元素做出反应，找到它前面紧邻的.hideme元素单独修改显示属性，完全不会碰其他的.hideme，完美适配页面上多个下载按钮的场景。

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