javascript - 试图让按钮出现在鼠标悬停上

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>