|
| |
|
|
Delee
Posts: 1
Joined: 5/10/2006
Status: offline
 |
CSS :hover in Internet Explorer, hover-off event fails. - 5/10/2006 4:30:45
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.
***
<!-- 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>
***
/* 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');
}
|
|
|
|
rdouglass
Posts: 9224
From: Biddeford, ME USA
Status: offline
|
RE: CSS :hover in Internet Explorer, hover-off event fa... - 5/10/2006 9:38:42
Hi and Welcome to OutFront.
I don't see an a.tab_home:link section in that CSS but I see the a.tab_home:hover. As a rule of thumb, if I define one (link,visited,hover,active), I'll define them all. I'd try putting an a.tab_home:link item in as well.
Hope it helps.
< Message edited by rdouglass -- 5/10/2006 10:13:23 >
_____________________________
Don't take you're eye off your final destination.
ASP Checkbox Function Tutorial.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
