IE7 iframe hover-bug

IE7 does not correctly process the ending of :hover events when the mouse is positioned over an iframe.

An element which has been altered by a :hover directive will remain altered as long as the user moves their mouse quickly enough over to an iframe element on the same page.

Test page Workaround is not included
Reported by: Darryl Dixon.

Explorer 7 | Reported on 10 November 2006.

This site is no longer maintained. I’m sorry, but it’s just too much work for too little return. You can continue to browse old bug reports, though.

Search reports by browser:

Atom RSS


(Add your own)

1 Posted by STM on 24 January 2007 | Permalink

The IE7 :hover bug can be mitigated by placing a hidden div behind the element. Use javascript to make the div visible if the browser is IE 7. The div needs to be wider & higher than the element and must have a background-color. Add filter:(opacity=1) if you don't want the div to be seen.

The net result here is that when the mouse is moved from element it hits the div, which fires the mouseout event (removes the :hover alteration).

Remember to hide the div again on mouseout.

2 Posted by Nick Rowland on 26 January 2007 | Permalink

I had this issue on a site recently when adding some functionality, I worked around it by covering the iframe with a div and using onmouseover events to hide it when moving off the hover and another to show it when the hover was active.

It worked for me albeit a little crude

Thankfully I don't usually use iframes

3 Posted by Henning Krapoth on 9 February 2007 | Permalink

Found another workaround here:

Works for me.