javascript - 如何通过鼠标悬停使 div 元素可见/隐藏

Question

我在一个 php 文件中有三个连续的 DIV 元素，我想通过 onMouseOver 在中间 (Box2) 隐藏和显示 DIV。

echo"<div class='colorBox' id='box1'>Box1</div>";
echo"<div class='colorBox' id='box2'>Box2</div>";
echo"<div class='colorBox' id='box3'>Box3</div>";

我想到了两种解决方法，但它们都不起作用。 首先，我尝试用纯 CSS 解决它:

#box2:hover
{
    visibility: hidden;
}

但是当我使用它时，DIV 在将光标移到 div 上时开始闪烁。

其次，我尝试用 javascript 解决它并设置一个 onmouseover和一个 onmouseout - 像这样向 div 发送事件

CSS:

echo"<div class='colorBox' id='box2' onmouseover='hideBox()' onmouseout='showBox()'> Box2 </div>";

Javascript:

function hideBox()
{
    var box2 = document.getElementById("box2");
        box2.style.visibility = "hidden";
}

function showBox()
{
    var box2 = document.getElementById("box2");
    box2.style.visibility = "visible";
}

但是这个解决方案也会使 DIV 闪烁。 我通过 display:none 找到了其他解决方案但这把我的内容搞得一团糟。

我希望你能帮我解决这个问题。 非常感谢任何帮助。

Answer 1

您的代码实际上是删除了导致闪烁的框，您将鼠标悬停在该元素上，该元素消失了，鼠标不再位于其上方，导致它再次显示。

您可以使用opacity

解决这个问题

#box2:hover
{
    opacity: 0;
}