Пытаюсь сделать так, чтобы кнопка появлялась на экране мыши

Question

Я пытаюсь сделать так, чтобы когда я наводил указатель мыши на эту кнопку, она появлялась.

вот мой код

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

Скрытый элемент не имеет событий мыши, поэтому вам нужно будет использовать непрозрачность.

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

Вы можете скрыть это, если примените наведение / наведение мыши на родительский

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