Question

我在php-File中连续有三个DIV-Elements，我想通过onMouseOver隐藏并在中间显示DIV（Box2）。

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

我有两种选择如何解决这个问题，但它们没有用。 Fisrt我试图用纯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;
}

Answer 2

这是一个解决方案;通过建立父母<div>，您的问题将得到解决：

.box1head:hover #box1 {
  visibility: hidden
}

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

如何使鼠标悬停可见/隐藏div元素

2 个答案: