Need to change background image onmouseover in a jquery site

hecked up trying a onmouseover background image change event for a link in a jque开发者_开发知识库ry site, if anyone knows it, please answer this with a demo!

Assumption: you have a transparent background image like the one in this example.

Working demo at: http://jsfiddle.net/marcosfromero/Bytmn/

$('#logo').hover(function() {
    $(this).addClass('highlighted');
}, function() {
    $(this).removeClass('highlighted');
});

You'll need an image with logo id and a CSS rule for the highlighted class.

jQuery hover expects two functions to be called:

1. One mouse is over (mouseenter event)
2. One mouse is out (mouseleave event)

a
{
background:#ffffff url('path-of-your-mouseout-image.jpg') no-repeat top left;
}

a:hover
{
background:#ffffff url('path-of-your-mouseover-image.jpg') no-repeat top left;
}

CSS CAN DO IT BUDDY.