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 1 of 1
  1. #1
    New Coder
    Join Date
    Aug 2009
    Posts
    28
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Div overylay not "blocking" mouseover event in covered div (IE only)

    Hello. I have an image on my site with a mouseOver event that causes a previously hidden <div> to become visible.

    The <div> in question shows up in front of the image, but does not completely cover it. A little bit of the image below sticks out to the right of the div overlay. The <div> has a mouseOut even that hides itself again. However, because the image below peeks out to the right, if the user runs their mouse out of the <div> to the right, it opens the div back up again. This was no surprise.

    So... i added a second <div> that completely covers the image below, then nested the fore-mentioned div inside it. When the mouseOut even occurs it hides the functional <div>, then triggers a .5 second timer that closes this "blocking" div container.

    This solution works great in Firefox, Google Chrome, & Safari. However, IE once again needs special catering. In IE the new "blocking" div does not prevent the mouseOver event for the image it is blocking from being triggered. In testing i made the background of the blocking <div> an obnoxious color so that i could be sure it was completely covering the image below. Even though i can't see the image, putting my mouse over that area still triggers its mouseOver event.

    I hope i explained that in a way that makes sense. The site is http://jugtones.com, and the image is the animated jug on the right side below the menu.

    Thanks in advance for any advice you can offer. -Scott

    Code:
    .menu_credits_container{
    	position: absolute;
    	top: 290px;
    	right: 0px;
    	visibility: hidden;
    	width: 165px;
    	height: 166px;
    }
    .menu_design_credits{
    	position: relative;
    	right: 15px;
    	visibility: hidden;
    	width: 150px;
    	height: 160px;
    	box-shadow: 3px 3px 5px #818181;
    	-webkit-box-shadow: 3px 3px 5px #818181;
    	-moz-box-shadow: 3px 3px 5px #818181;
    	border:1px solid black;
    	background:white;
    	color: black;
    	padding: 2px;
    }
    Last edited by Jack.Straw; 08-12-2010 at 03:00 PM.


 

Posting Permissions

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