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

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>

如果将 hover/mouseover 应用到父项

，则可以隐藏它

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

Trying to make button appear onmouseover