javascript - 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 onmouseover="document.getElementById('center').style.visibility = 'visible'">
    <div id="center" onmouseout="this.style.visibility = 'hidden'">
    </div>
</div>