JQuery Mouseover-Bildüberlagerung

Ich frage mich nur, wie ich das zu 100% richtig hinbekomme. Ich glaube ich bin fast da.

Grundsätzlich habe ich ein Bild und wenn ich mit der Maus darüberfahre, möchte ich, dass ein Overlay (ein farbiges Div) über dem Bild erscheint.

Ich arbeite daranGeige.

<img src="http://mirrorchecker.com/images/rod_160.png" width="160"
class="company-image"/>
<div class="company-image-overlay"></div>

/* CSS */
.company-image
{
}
.company-image-overlay
{
width: 160px;
height: 160px;
background-color: #ffb00f;
z-index: 1;
opacity: 0.5;
    position: fixed;
    top: 0.5em;
    display:none;
}

/* JQUERY */
$('.company-image').mouseover(function()
     {
        $('.company-image-overlay').show();
     });
$('.company-image').mouseout(function()
     {
       $('.company-image-overlay').hide();
     });

Das Problem scheint zu sein, wenn das Overlay erscheint, die Maus sich technisch nicht mehr über dem.company-image Daher erhalten wir ein ständiges Wechseln von über / aus und den blinkenden Hintergrund.

Irgendwelche Ideen?

Antworten auf die Frage(3)

Ihre Antwort auf die Frage