...

View Full Version : on mouseover show transparent div over hovered div



UD2006
03-26-2012, 01:10 PM
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?



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
03-27-2012, 07:08 AM
No one an idea how to solve this?

Mishu
03-27-2012, 07:17 AM
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
03-27-2012, 07:23 AM
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
03-27-2012, 07:33 AM
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
03-27-2012, 09:04 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum