CODEWITHSUNDEEP
jquerycsshoverbackground-imageonmouseover
johnsaxon
johnsaxon

Reputation: 1

Need to change background image onmouseover in a jquery site

hecked up trying a onmouseover background image change event for a link in a jquery site, if anyone knows it, please answer this with a demo!

Upvotes: 0

Views: 1157

Answers (2)

marcosfromero
marcosfromero

Reputation: 2853

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)

Upvotes: 5

Sujit Agarwal
Sujit Agarwal

Reputation: 12508

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.

Upvotes: 2

Related Questions