javascript - 悬停在按钮上的CSS技巧按钮

Question

我想创建一个按钮，当点击它时会在它上面显示3个按钮

基本上我想做的是提供下载文件的镜像链接，所以我想创建一个下载按钮，当用户点击它(或在桌面上将鼠标悬停在它上面)时，用户将获得各种镜像选项。

代码:

.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;
}

.download:hover {
  /* how to change display proper of hideme class with this */
}

.hideme {
  display: none;
}

<h2>CSS Buttons</h2>

<div class="hideme">
  <button class="button">Mirror 1</button>
  <button class="button">Mirror 2</button>
  <button class="button">Mirror 3</button>
</div>
<button class="download">Download</button>

我将在同一页面上至少有 5 个下载按钮，因此使用 JS 更改 .hideme 属性也会更改其他 4 个按钮

所以我也不能使用onclick...

Answer 1

这样做但是你必须稍微改变你的html

.download:hover + .hideme {
    display: block;
}

这是您的元素的一个工作示例

https://jsfiddle.net/wg1w5rLh/

但是你并没有真正得到好的结果所以这是正确的版本:

https://jsfiddle.net/wg1w5rLh/1/