Cross browser CSS3 hover on non-anchor tags


All browsers but Internet Explorer handle hover on tags other than the anchor tag; the anchor tag is most often used for links. By using CSS hover one can make for example a drop down menu, by causing elements to appear when the mouse is placed over them; Without, using javascript.

The solution to Internet Explorer lack of hover support comes from a method to extend the functionality of the browser with behavior files.

Peterned created csshover3.htc specifically to allow CSS3 hover to be used today with all browsers. It is used by adding the following to a html page inside a style tag.

body { behavior: url("csshover3.htc"); }

csshover3.htc must be loaded onto the host. … Peterned has directions. An example CSS only menu is also shown. … the behavior program then looks at the CSS of the page and enables hover to work on any style class that is using it.

Advertisements

3 responses

  1. […] Cross browser CSS3 hover on non-anchor tags « Wsmithdesign's Blog […]

  2. […] csshover3.htc works to add hover to all elements in IE However, it does come with a performance hit. It is always good to have alternative; sometimes different scripts cause problems for each other. […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: