onMouseOver和onMouseOut显示和隐藏div

Question

好的，我想要的是当用户将鼠标指针移到某个div它应该出现。 当鼠标离开div ，该div应该消失。 这就是我到目前为止所做的。

<div id="center"  style="position:absolute; left:45%; top:35%;" onMouseOver=" document.getElementById('center').style.visibility = 'visible'" onMouseOut="document.getElementById('center').style.display = 'none'">

但是我的问题是，当鼠标离开div它消失了，但是当我再次越过div它没有出现。 我该如何解决？

Answer 1

隐藏div时，将无法再次将鼠标悬停在div上。 通常这就是隐藏元素的要点，以便客户端无法访问它。 您可以做的一件事是添加一个容器，并将mouseover事件附加到该容器。

<div onmouseover="document.getElementById('center').style.visibility = 'visible'">
    <div id="center" onmouseout="this.style.visibility = 'hidden'">
    </div>
</div>

Answer 2

试试这样：

<div id="center"  style="position:absolute; left:45%; top:35%;background-color:#03C;width:400px;height:400px;opacity:0;" onMouseOver="document.getElementById('center').style.opacity = 1" onMouseOut="document.getElementById('center').style.opacity = 0">

我为div和某个尺寸添加了背景色，因为如果div内部没有任何内容且该尺寸没有成本消耗，它就会崩溃。

希望这很有用