www.webdeveloper.com
Results 1 to 3 of 3

Thread: Overlay Div: mouseouts firing on each letter underneath the overlay in IE

  1. #1
    Join Date
    Apr 2009
    Posts
    2

    Overlay Div: mouseouts firing on each letter underneath the overlay in IE

    Wondering if anyone knows the way around this:
    If I have a structure that has an image which when moused over, shows a description div, like this:
    <div style="position:relative">
    <div style="position:relative;background-image:url(...);width:500px;height:600px;overflow:hidden">
    <div id="desc" style="opacity:0;filter:alpha(opacity=0);width:360px;position:absolute;bottom:0px;right:0px;z-index:0px;">
    <div class="MainContentText">Materials: &nbsp;</div>
    <div class="MainContentText">Products: &nbsp;</div>
    </div>
    </div>
    <div id="overlay" onmouseover="opacity('desc', 0, 100, 500)" onmouseout="opacity('desc', 100, 0, 500)" style="position:absolute;top:0px;right:0px;width:500px;height:600px;z-index:500;"></div>
    </div>
    All workes fine on Firefox, however not in IE7 or 8 using doctype
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    The problem in IE is that whenever the mouse goes over a letter as in one of the letters in 'Materials:' or 'Products:', the mouseover event fires on the overlay and causes it to flicker.
    Im not sure why the overlay doesnt block these events since it is definitely the foremost element.

    Any idea how to get around this with CSS? I dont want to have to use javascript much.

    THanks.

  2. #2
    Join Date
    Apr 2009
    Location
    NFLD, Canada
    Posts
    42
    Try using "display: none;" on the description div's coupled with "position: absolute"

    Nest each image & description div within a parent div then apply the :hover effect to the parent div rather than the image.

    Give the parent div's "position: relative"

    So your :hover event will look something like:

    Code:
    parentDiv :hover descriptionDiv {
      display: block;
      top: <INSERT y Co-Ord>;
      left: <INSERT x Co-Ord>;
    }
    The x,y co-ords will be relative to the image (actually relative to the parent div, but without borders it will appear relative to the image)

    Hope that helps.

  3. #3
    Join Date
    Apr 2009
    Posts
    2

    What I did

    Hey, thanks for your help.
    I ended up changing the text containing elements to SPANs and then the overlay script as follows:

    <div id="overlay" class="MainRightOverlay" onmouseover="if(event.fromElement&&event.fromElement.tagName!='SPAN')opacity('RightDescBoxLeft', 0, 100, 500)" onmouseout="if(event.toElement&&event.toElement.tagName!='SPAN')opacity('RightDescBoxLeft', 100, 0, 500)"></div>

    Cheers.

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