on mouseover show transparent div over hovered div

[UD2006]

I am creating a page on which I have several div's. They contain an image as background.
When I do a mouseover on a div, I want a div (with an image semitransparant), to be placed ontop of it's hovered div. When mouseout the semitransparant div should be hidden.

Now I have the following code, it does work, but sometimes on mouseout the semitransparant div isn't hidden (when the mouse moves to quick). Is there a solution for it?

PHP Code:

echo '<div id="block-'.$BlockNums.'" class="blok '.$BlockStyle.'" onmouseover="document.getElementById(\'message\').style.display=\'block\';" ><img src="images/'.$BlockImg.'.png" width="181"/></div>';
echo '<a href="'.$BlockLink.'" style="display:block;cursor:pointer;"><div id="message" class="disMessage" style="display:none;" onmouseout="document.getElementById(\'message\').style.display=\'none\';"><p>'.$BlockMouse.'</p></div></a>'; 


And the css:

.disMessage
{
	width: 163px;
	height: 168px;
	z-index: 1000;
	position: absolute;
	padding: 10px 10px 10px 10px;
	text-align: center;
	background-image: url("../images/hoverTrans.png");
}
.blok
{
	width: 181px;
	height: 186px;
	/*border: 1px solid #FE7701;*/
	background-image: url("../images/blok.png");
	padding: 1px 9px 9px 1px;
}

Thanks

[UD2006]

No one an idea how to solve this?

[Mishu]

You could use css positioning to put the semi-transparent div on top of the other and then hide it initially. When the bottom div is hovered on, set the display style of the semi-tansparent div to block.

[UD2006]

Originally Posted by Mishu

You could use css positioning to put the semi-transparent div on top of the other and then hide it initially. When the bottom div is hovered on, set the display style of the semi-tansparent div to block.

If you look at the code (first code), you see it's already been done.

The only problem is that I use multiple 'parent' div's next to each other, so when I move the mouse over a parent the semi-transparent div is shown, but when I move the mouse further over the other div's the semi-transparent on the first parent remains, while it should be hidden (I no longer have my mouse hovering the first parent div).

[Mishu]

Originally Posted by UD2006

If you look at the code (first code), you see it's already been done.

I didn't have time to go work out what the php code is creating. It's badly formatted in the post and contains inline styles. Why not post the html the code actually creates and that will be easier to see what you have there.

[UD2006]

Originally Posted by Mishu

I didn't have time to go work out what the php code is creating. It's badly formatted in the post and contains inline styles. Why not post the html the code actually creates and that will be easier to see what you have there.

Ok, so here the html:

<div id="block-1" class="blok LeftTop" onmouseover="document.getElementById('message').style.display='block';" ><img src="images/verhuisbedrijf.png" width="181"/></div>
<a href="verhuisbedrijf" style="display:block;cursor:pointer;">
<div id="message" class="disMessage" style="display:none;" onmouseout="document.getElementById('message').style.display='none';"><p>Testing</p></div></a>
<div id="block-2" class="blok CenterTop"><div class="blEmpty"></div></div>
<div id="block-3" class="blok RightTop"><div class="blEmpty"></div></div>
<div id="block-4" class="blok LeftCenter"><div class="blEmpty"></div></div>
<div id="block-5" class="blok CenterMid"><div class="blEmpty"></div></div>
<div id="block-6" class="blok RightCenter"><div class="blEmpty"></div></div>
<div id="block-7" class="blok LeftBottom"><div class="blEmpty"></div></div>
<div id="block-8" class="blok BottomCenter"><div class="blEmpty"></div>
</div><div id="block-9" class="blok RightBottom"><div class="blEmpty"></div></div>

Hope you can find something.