如何通過鼠標懸停使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>";

我談到了兩種解決方案，但是它們沒有用。 Fisrt我試圖用純CSS解決它：

#box2:hover
{
    visibility: hidden;
}

但是，當我使用此按鈕時，DIV開始閃爍，同時將光標移動到div上。

其次，我試圖用javascript解決它，並設置div這樣的onmouseover和onmouseout -Event到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>