www.webdeveloper.com
Results 1 to 2 of 2

Thread: jQuery mouseover div is stacking behind img in relatively positioned parent div in IE

  1. #1
    Join Date
    Jul 2006
    Posts
    11

    jQuery mouseover div is stacking behind img in relatively positioned parent div in IE

    Hi there, i have kind of a strange bug in IE 6/7/8 that i just can't figure out for the life of me so i thought i would consult some experts (thats you lot).

    Basically i have a page with an image that is inside a div with an id of 'img_map'. Also inside #img_map is another div with a class of 'layout' and inside .layout are several divs all with a class of block on them (see HTML structure below).

    Code:
    <link rel="stylesheet" type="text/css" href="css/default.css" />
    <div id="image-map-template">
        <div id="img_map"> <img src="images/bg.jpg" alt="Shop the Window" width="990" height="593" usemap="#map1" />
            <map name="map1" id="map1">
                <area shape="rect" coords="853,109,988,130" href="#" alt="Shop Key Pieces" />
            </map>
            <div class="layout">
                <div class="block item_1" style="width: 120px; height: 140px; z-index: 20; position: absolute; left: 124px; top: 325px;">
                    <p> <a href="http://www.bbc.co.uk"><img src="images/info_bubble.gif" alt="Faded Flower Dress" width="97" height="60" /></a> </p>
                </div>
                <div class="block item_2" style="width: 160px; height: 100px; z-index: 30; position: absolute; left: 245px; top: 70px;">
                    <p class="text_block">Here is a live text block <a href="http://www.bbc.co.uk">with a link</a> in the middle of it. Here is lots more text to test what will happen when the paragraph overflows its boundaries.</p>
                </div>
            </div>
        </div>
    </div>
    What i want is these block divs to appear on rollover with further details when someone rolls over part of the main image. I have used jQuery to add a class name of 'show' to the paragraph tags inside .block, when they are moused over. These p tags are initially set to display: none, and .show class on them simply sets display: block on them to display them.

    So far so simple. This works fine on FF and Chrome but nothing doing in IE browsers. The reason for this seems to be because the main image is sitting over the block divs so jQuery can't actually 'see' the blocks to add the show class to them. I have narrowed this problem down to the fact that the main div (#img_map) has position relative on it. If i remove this then the rollover works but obviously the rollovers appear in the wrong place as the position: absolute on the .block divs throws it out of kilter.

    So does anyone have any idea why this is happening, and how i fix it?

    P.S. Stylesheet is attached and the jQuery code for the rollover is here:

    Code:
    			<script type="text/javascript">
                
    		   $(document).ready(function() {
    									  
    				$("div.block").mouseover(function () {
    					$(this).children().addClass("show");
    					
    					$(this).mouseout(function () {
    						$(this).children().removeClass("show");
    					});
    				});
                  
                });
                
                </script>
    Attached Files Attached Files

  2. #2
    Join Date
    Mar 2010
    Posts
    128
    For some reason, I am not sure why, when you add a background color to the to already existing inner style divs of layout it will allow the roll overs to function in ie. Here is my full code example from what you provided.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    	<style type="text/css">
        <!--
        .cms_content #image-map-template {
            background-color: #fff;
            }
        
        #img_map {
            position: relative;
            }
            
        #img_map img {
            display: block;
            }
            
        #img_map .layout .block p {
            display: none;
            width: 100&#37;;
            height: 100%;
            z-index: 3;
            }
            
        #img_map .layout .block p.show {
            display: block !important;
            }
            
        #img_map .layout .block p.text_block {
            background-color: #fff;
            padding: 8px;
            margin: 0;
            opacity: 0.8;
            border: 1px solid #666;
            }
        
        #img_map .layout .block p a {
            width: 100%;
            height: 100%;
            display: block;
            }
            
        #img_map .layout .block p.text_block a {
            width: auto;
            height: auto;
            display: inline;
            }
        -->
        </style>
    
    			<script type="text/javascript">
                
    		   $(document).ready(function() {
    									  
    				$("div.block").mouseover(function () {
    					$(this).children().addClass("show");
    					
    					$(this).mouseout(function () {
    						$(this).children().removeClass("show");
    					});
    				});
                  
                });
                
                </script>
    	</head>
    
    <body>
    
    <div id="image-map-template">
        <div id="img_map">
        	
            <img src="images/bg.jpg" alt="Shop the Window" width="990" height="593" usemap="#map1" />
            
            <map name="map1" id="map1">
                <area shape="rect" coords="853,109,988,130" href="#" alt="Shop Key Pieces" />
            </map>
            
            <div class="layout">
            
                <div class="block item_1" style="width: 120px; height: 140px; z-index: 20; position: absolute; left: 124px; top: 325px; background-color:#FF0000;">
                    <p> <a href="http://www.bbc.co.uk"><img src="images/info_bubble.gif" alt="Faded Flower Dress" width="97" height="60" /></a> </p>
                </div>
                
                <div class="block item_2" style="width: 160px; height: 100px; z-index: 30; position: absolute; left: 245px; top: 70px; background-color:#FF0000;">
                    <p class="text_block">Here is a live text block <a href="http://www.bbc.co.uk">with a link</a> in the middle of it. Here is lots more text to test what will happen when the paragraph overflows its boundaries.</p>
                </div>
                
            </div>
            
        </div>
    </div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles