How to make a div-Element be visible/hidden by Mouseover

Question

I have three DIV-Elements in a row within a php-File and i want to hide and show the DIV in the middle (Box2) by onMouseOver.

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

I came to two options how to solve this, but they are not working. Fisrt i tried to solve it with pure CSS:

#box2:hover
{
    visibility: hidden;
}

But when i use this the DIV starts flickering while moving the curser over the div.

Second i tried to solve it with javascript and to set an onmouseover and an onmouseout -Event to the div like this

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

But this solution makes the DIV flickering too. I found out other solutions with display:none but this is messing up my content very bad.

I hope you can me help out of this. Any help is highly apreciated.

Answer 1

Your code is actually removing the box causing the flickering, you mouse over, the element is gone and there for the mouse is no longer over it causing it to display again.

You can fix this by using opacity

#box2:hover
{
    opacity: 0;
}

Answer 2

Here is a solution; by making a parent <div> your problem will be solved:

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