CODEWITHSUNDEEP
javascripthtmlcssbuttonhover
golev
golev

Reputation: 41

css trick buttons on hover on a button

I want to create a button, when clicked it will show 3 buttons above it

basically what I want to do is provide mirror links for downloading a file, so I want to create a button for download and when user click on it (or hover over it on desktop) user will get various mirror options.

Code:

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

I will be having at least 5 download button on same page so changing .hideme property with JS will also change it for other 4 button

so I cant use onclick also...

Upvotes: 1

Views: 1546

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

Here's how I'd do the tooltip:
pure CSS, using the :focus state and :hover, and the next sibling selector +.
Works even by tabbing throughout the website - for accessibility reasons.

.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

Upvotes: 0

tehawtness
tehawtness

Reputation: 288

I changed some of the classes to ids for brevity but here's an example:

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>

Upvotes: 0

Norair
Norair

Reputation: 74

do this but you have to change your html a little bit

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

here's a working example of your projekt

https://jsfiddle.net/wg1w5rLh/

But you doesn't really get a good result so here's right version:

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

Upvotes: 1

Related Questions