Blog

Home > Javascript  > Detecting the :hover css selector style in jQuery/javascript

A while ago I wrote a plugin for jQuery that makes links fade between nicely when a user hovers over them (see here), rather than suddenly changing from one colour to the next. Although the plugin allowed you to set the fade colour I wanted to detect the fade colour set using the css :hover pseudo selector and replace the css hover rule with the jQuery fade effect.

This turns out to be a lot harder than it seems. JavaScript doesn’t support getting or setting the attributes of pseudo selectors, meaning that you cannot get the :hover css style directly. Instead you have to either parse the css style-sheets directly to find the style, or grab the attribute when the rule is triggered by the mouse hovering over the element.

In this post we are going to look at grabbing the css hover style for the element when a mouse triggers the css rule, which is the way the attribute was got for the links hover plugin.

The following jQuery code looks like it should put up an alert box giving the css hover colour.

$('a').hover( function() {
//get the colour of the hovered element while it is being hovered
hovercolor = $(this).css("color");
alert(“the hover colour is: ”+ hovercolor );
}, function(){});

It will work on most modern browsers. Unfortunately, try this is Internet Explorer 8 or less and it will not work, returning the default colour rather than the hover colour. Internet Explorer versions less than 9 appear to run the JavaScript first, meaning that the css rule has not been applied by the time the script asks for the rule.

There is a solution to this however. Adding a slight delay to the detection code by wrapping it in a setTimeout call, will give Internet Explorer enough time to apply the style so that you can detect it.

$('a').hover( function() {

hoverElem=this;
//add in a slight delay to allow Internet explorer to catch up
setTimeout( function() {
hovercolor = $(hoverElem).css("color");
alert("the hover colour is: "+ hovercolor );
},0);
}, function(){});

This should work on all modern browsers as well as all Internet Explorer versions 6 and up. You can try out the hover attributes on the page here.

Unfortunately if you want to use the hover css style without the user hovering over it, you will not be able to use this technique. At some point in the near future I’ll write a nice jQuery plugin to allow you to use these attributes without a user having to hover over the element.

2 Comments

  • February 8, 2013at9:09 pm

    I have seen the following SO question: IE9 not removing :hover style on DOM change . Which seems to be the same issue I am experiencing, but I want to avoid using jQuery to force the style changes, if possible.

  • July 16, 2013at1:45 am

    “At some point in the near future I’ll write a nice jQuery plugin to allow you to use these attributes without a user having to hover over the element.”

    You ever get around to this?

Post a Comment