CSS :hover in Internet Explorer, hover-off event

You are not logged in. [Log In] ubbDev » Forums » Community Development » HTML, CSS, Programming and MySQL
» HTML, JavaScript, and CSS » CSS :hover in Internet Explorer, hover-off event

Topic Options

#110007 - 05/10/06 04:38 AM

CSS :hover in Internet Explorer, hover-off event

Delee

Junior Member

Registered: 05/10/06
Posts: 1

I am using the :hover property from CSS for A links (since IE doesn't support other elements) to create mouse overs for a graphical menu. Firefox and Opera both currently display correctly and Internet Explorer appears to do so as well at first glance.

However, when the mouse is moved quickly, the mouse-out event appears to not trigger. The :hover graphic sticks. The following image demonstrates this:

http://img204.imageshack.us/img204/6646/mouseoverfailie5vf.gif

If anyone has any ideas on solving this problem please let me know. I'm NOT using any Javascript and I did try to make use of display: block;, but that didn't help.

***

Code:

<!-- Background image for each tab. -->
<div class="tabs">

   <!-- Encloses all graphics containing tab text. -->
   <div class="tab_text">

       <!-- Uses an empty pixel as the main image,
       with the background changing on mouse over. -->
       <a href="" class="tab_home">
           <img src="_.gif" class="tab tab_home">
       </a>
   </div>
</div>

***

Code:

/* Background image for the tab set. */
DIV.tabs {
   width: 82px;
   height: 396px;

   position: absolute;
   top: 96px;
   left: 806px;
}

/* Div that encloses all the tab text images. */
DIV.tabs DIV.tab_text {
   width: 41px;
   height: 396px;

   position: absolute;
   top: 0px;
   left: 0px;
}

/* Styles pertaining to all tab images. */
DIV.tabs A IMG.tab {
   width: 28px;

   position: relative;
   left: 6px;
   z-index: 6;
}

/* Style pertaining to the Home link. All others have the same type of code, just different sizing and images. */
DIV.tabs DIV.tab_text A.tab_home IMG.tab_home {
   height: 63px;
   top: 16px;

   background-image: url('tab_text_home.gif');
}

/* Style on mouse-over of the Home link. */
DIV.tabs DIV.tab_text A.tab_home:hover IMG.tab_home {
   background-image: url('tab_text_home_mo.gif');
}

Edited by Ian Spence (07/29/06 08:41 AM)

Top

#110008 - 05/11/06 06:14 PM Re: CSS :hover in Internet Explorer, hover-off event fails.
AllenAyres I type Like navaho Registered: 03/10/00 Posts: 25383 Loc: Texas	They had to use javascript to get image hovers to work correctly in IE: http://www.alistapart.com/articles/hybrid _________________________ - Allen - What Drives You?
Top