悬停在按钮上的css技巧按钮答案

【问题标题】：css trick buttons on hover on a button悬停在按钮上的css技巧按钮
【发布时间】：2018-11-05 03:24:32
【问题描述】：

我想创建一个按钮，点击它上面会显示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...

【问题讨论】：

您对“JS 做错了” 的假设是错误的。如果使用正确的选择器，JS 可以做到这一点。

标签： javascript html css button hover

【解决方案1】：

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

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

这是您项目的工作示例

https://jsfiddle.net/wg1w5rLh/

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

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

【讨论】：

jsfiddle.net/wg1w5rLh/2 所以现在按钮在它上面，你必须阅读问题。打电话时点击（桌面 = 悬停）

【解决方案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>

【讨论】：

Mouseover 和 mouseout 通常在 Web 开发中没有真正的应用。不仅有一个稍微不同和更好的mouseenter / mouseleave——而且这也是 CSS 的:hover 选择器的完美选择。此外，如果有多个按钮/工具提示，您的代码也无法正常工作。

【解决方案3】：

以下是我如何执行工具提示：
纯 CSS，使用 :focus 状态和 :hover，以及下一个兄弟选择器 @987654323 @.
出于可访问性的原因，甚至可以在整个网站中tabbing。

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

<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

【讨论】：