Question

I have 4 div’s set in following manner:

<1st div> <2nd div>
<3rd div> <4th div>

Whenever, mouse hover over any of the div, div background should be changed.

How can I achieve this. Use of jQuery is also allowed.
Thanks

Answer 1

Here is a solution using jQuery.

$('div').hover(function() {
   $(this).css({ backgroundImage: 'url(whatever.jpg)' });
}, function() {
   $(this).css({ backgroundImage: 'none' });
});

However, if I was doing this, I’d add a class and use CSS to change the actual background image.

You could do it with plain JavaScript too…

var divs = document.getElementsByTagName('div');

for (var i = 0, divsLength = divs.length; i < divsLength; i++) {
    divs[i].onmouseover(function() {
            divs[i].style.backgroundImage = 'url(whatever.jpg)';
        });

    divs[i].onmouseout(function() {
            divs[i].style.backgroundImage = 'none';
        });
}

And you could even do it with CSS only…

div:hover {
    background-image: url(whatever.jpg);
}