14/08 2009

Using jQuery to Change the background and cursor

Anyone who builds fully standards compliant sites like Webegg, have come across the problem of changing the cursor on rollover or for some other reason, then tried to validate their code one to find that it fails.

The right way to change cursors

I wrote a bit of jQuery to get over this hurdle. This excerpt is from the boxouts on my homepage but can just as easily be used on buttons with graphics or indeed anywere where the cursor won't naturally change to what you want. Seems like a small thing to worry about? It's also a big usability issue. The visitor needs to feel confident that something might happen if they click.

This is the snippet of jQuery that changes the background colour:

$('.leftarea').hover(function () {
  $(this).css('background', '#FFFFFF');
}, function () {
  $(this).css('background', '#DBA6A2');

There is also an extra little part to the actual cursor change which looks for the link contained within the element and will navigate to it if the visitor clicks anywhere within the element:

$('.services').hover(function () {
  $(this).css("cursor", "pointer");
  $(this).click(function () {
    window.location = $(this).find("a").attr("href"); return false;
}, function () {
  $(this).css("cursor", "auto");

Leave a Reply

Your email address will not be published. Required fields are marked *

This article is in the jquery category. Here are some other related articles also in this category.