Question

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

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

代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

Answer 1

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

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

这是你的项目的一个工作示例

https://jsfiddle.net/wg1w5rLh/

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

<强> https://jsfiddle.net/wg1w5rLh/1/

Answer 2

为简洁起见，我将一些类改为id，但这是一个例子：

let dlButton = document.getElementById('download'),
    hiddenButtons = document.getElementById('hideme');
 
dlButton.onclick = function(e) {
   hiddenButtons.style.display = 'block';
}

dlButton.onmouseover = function() {
  hiddenButtons.style.display = 'block';
}

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

<h2>CSS Buttons</h2>

<div id="hideme">
  <button class="button">Mirror 1</button>
  <button class="button">Mirror 2</button>
  <button class="button">Mirror 3</button>
</div>
<button id="download">Download</button>

Answer 3

以下是工具提示的方式：
纯CSS ，使用:focus州和:hover以及下一个兄弟选择器+。
即使是标签也可以在整个网站上工作 - 辅助功能。

＆＃13;

.Btn {
  border: 0;
  background: #4CAF50;
  color: white;
  padding: 0.5em 1em;
  cursor: pointer;
}

.Tooltip {
  display: inline-block;
  position: relative; /* so that we can absolute the tooltip's box */
}

.Tooltip-box {
  display: block;
  position: absolute;
  padding: 10px;
  z-index: 1;
  bottom: 100%;
  visibility: hidden;
  opacity: 0;
  transition: 0.2s;
  transform: translateY(-1em);
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
.Tooltip-box:after {
  content: "";
  position: absolute;
  left: 5px;
  bottom: -5px;
  border: 5px solid transparent;
  border-bottom: 0;
  border-top-color: #fff;
}

.Tooltip-btn:focus+.Tooltip-box,
.Tooltip-box:hover {
  visibility: visible;
  opacity: 1;
  transform: translateY(0%);
}

＆＃13;

<h2>Buttons with tooltip example</h2>
Lorem ipsum

<span class="Tooltip">
  <button class="Tooltip-btn Btn">Download</button>
  <span class="Tooltip-box">
    <a href="#">Mirror 1</a>
    <a href="#">Mirror 2</a>
  </span>
</span>

some more text...<br>
dolor sit amet consectetur adipiscing...<br>

<span class="Tooltip">
  <button class="Tooltip-btn Btn">Download</button>
  <span class="Tooltip-box">
    <a href="#">Mirror 1</a>
    <a href="#">Mirror 2</a>
    <a href="#">Mirror 3</a>
  </span>
</span>

etc, no jumpy website! <br>
Works even using TAB - for accessibility reasons

＆＃13;

css技巧按钮悬停在一个按钮上

3 个答案: