Trying to make button appear onmouseover

Question

I am trying to make it so that when i mouse over where this button is, it appears.

here is my code

html:

<div class="hide"><button type="button" onmouseover="appear()" id="button">LIGHT!!</button></div>

css:

div.appear {display: none;}

javascript:

function appear(){document.getElementById("button").style.display = "block";}

well if the button is hidden, there is no way to fire an event — epascarello, Feb 19 '20 at 23:11
Does this answer your question? [How to show hidden divs on mouseover?](https://stackoverflow.com/questions/2707100/how-to-show-hidden-divs-on-mouseover) TLDR: if the element is hidden, you cannot bind events to that element — Dom, Feb 19 '20 at 23:12

score 0 · Accepted Answer · answered Feb 19 '20 at 23:16

A hidden element has no mouse events so you would need to use opacity.

.hide {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hide:hover {
  opacity: 1;
  transition: opacity 0.5s ease;
}

<div class="hide"><button type="button" id="button">LIGHT!!</button></div>

You can hide it if you apply the hover/mouseover to the parent

.hide {
  height: 30px; 
  width: 200px;
}

.hide > button {
  display: none;
}

.hide:hover > button {
  display: inline;
}

<div class="hide"><button type="button" id="button">LIGHT!!</button></div>

1 Answers1