onMouseOver和onMouseOut显示并隐藏div

Ok what I want is when the user moves the mouse pointer over a certain div it should appear. And when the mouse leaves the div that div should disappear. This is what I have done so far.

好吧我想要的是当用户将鼠标指针移动到它应该出现的某个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'">

But my problem is that when the mouse leaves the div it disappears but when I again go over the div it does not appear. How can I fix that ?

但我的问题是，当鼠标离开div时它会消失但是当我再次越过div时它不会出现。我该如何解决这个问题？

2 个解决方案

#1

When you hide the div, you will not be able to mouseover it again. That is usually the point of hiding an element, so that clients cannot access it. One thing you can do is add a container and attach the mouseover event to the container.

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

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

#2

Try like this:

试试这样：

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

I added a background color to the div and some dimension because if the div has nothing inside and no costraints for the dimension it collapse.

我为div和一些维度添加了一个背景颜色，因为如果div内部没有任何东西，并且没有尺寸的折扣，它就会崩溃。

Hope this is useful

希望这很有用

#1

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

#2