:focus on what?

17 Aug 2005

Internet Explorer is very annoying, it does not support the CSS pseudo functionality for :focus. It also only supports :hover when used with a anchor tag.

This limits us greatly mainly because we are forced to use the javascript events onMouseOver / onMouseOut to trigger style changes on other 'elements' (for example the HTML button element).

relativelyabsolute.com shows us how we can get around this, using a .htc file (cssfocusandhover.htc) we can add the functionality to our web site. It is not ideal and if you have a large stylesheet it wont work at all.

So what does it do? the .htc file reads all your external stylesheets and replaces any instance of :focus / :hover with a non intrusive JavaScript alternative, hence eradicating the need for events such as onMouseOver and onMouseOut.

3 comments

25. At 09:07 AM on October 14, 2005, Andrew Faulkner wrote:

Hi,

I'd consider not using onMouseOver but onSelect. This ensures however the user interacts with the webpage (keyboard etc) then the effect will take place.

Sorry to be picky there - just though it would interest you.

Andy.

28. At 12:13 PM on November 26, 2005, Ethan wrote:

This is the latest thing that has frustrated me about IE. Honestly when it comes to something as simple as this, I just make sure the design looks fine in IE, and accept that IE users won't see the full effect of the page. I know this isn't a very good approach, especially when it comes to usability, but honestly I'm fed up and won't indulge IE anymore.

42. At 12:42 AM on March 12, 2006, Allan Mullan wrote:

Or... use onfocus() and onblur() (same result as Andrew' comment)...

Don't like using the .htc alternative, just seems dirty (what happens if the user has Javascript disabled)...

Post a comment