How to make a div-Element be visible/hidden by Mouseover
<p>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.</p>

<pre><code>echo"&lt;div class='colorBox' id='box1'&gt;Box1&lt;/div&gt;";
echo"&lt;div class='colorBox' id='box2'&gt;Box2&lt;/div&gt;";
echo"&lt;div class='colorBox' id='box3'&gt;Box3&lt;/div&gt;";
</code></pre>

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

<pre><code>#box2:hover
{
    visibility: hidden;
}
</code></pre>

<p>But when i use this the DIV starts flickering while moving the curser over the div.</p>

<p>Second i tried to solve it with javascript and to set an <code>onmouseover</code> and an <code>onmouseout</code>-Event to the div like this</p>

<p>CSS:</p>

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

<p>Javascript:</p>

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

function showBox()
{
    var box2 = document.getElementById("box2");
    box2.style.visibility = "visible";
}
</code></pre>

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

<p>I hope you can me help out of this.
Any help is highly apreciated.</p>