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

Answer 1

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>