Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Location
    Velsen Noord, Netherlands
    Posts
    207
    Thanks
    6
    Thanked 0 Times in 0 Posts

    on mouseover show transparent div over hovered div

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

  • #2
    Regular Coder
    Join Date
    Jul 2007
    Location
    Velsen Noord, Netherlands
    Posts
    207
    Thanks
    6
    Thanked 0 Times in 0 Posts
    No one an idea how to solve this?

  • #3
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Jul 2007
    Location
    Velsen Noord, Netherlands
    Posts
    207
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Mishu View Post
    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).

  • #5
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by UD2006 View Post
    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.

  • #6
    Regular Coder
    Join Date
    Jul 2007
    Location
    Velsen Noord, Netherlands
    Posts
    207
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Mishu View Post
    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:
    Code:
    <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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •