CSS Trick Кнопки при наведении на кнопку - PullRequest
Новая
       23

CSS Trick Кнопки при наведении на кнопку

0 голосов
/ 25 мая 2018

Я хочу создать кнопку, при нажатии на нее будут отображаться 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 кнопок загрузки на той же странице, поэтому изменение свойства .hideme с помощью JS также изменит его для других 4 кнопок

поэтому я не могу использовать onclick также ...

Ответы [ 3 ]

0 голосов
/ 25 мая 2018

Для краткости я изменил некоторые классы на идентификаторы, но вот пример: 

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>
0 голосов
/ 25 мая 2018

Вот как я бы сделал подсказку :
чистый CSS , используя состояние :focus и :hover, а также следующий селектор брата +.
Работает даже по вкладкам по всему сайту - для доступности причин. 

.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
0 голосов
/ 25 мая 2018

сделать это, но вы должны немного изменить свой HTML 

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

вот рабочий пример вашего проекта

https://jsfiddle.net/wg1w5rLh/

Но вы не 'Это действительно хороший результат, поэтому вот правильная версия:

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

...