javascript - div selected problem -

i have 4 div's set in following manner:

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

whenever, mouse hover on of div, div background should changed.

how can achieve this. use of jquery allowed. thanks

here solution using jquery.

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

however, if doing this, i'd add class , use css change actual background image.

you plain javascript too...

var divs = document.getelementsbytagname('div');  (var = 0, divslength = divs.length; < divslength; i++) {     divs[i].onmouseover(function() {             divs[i].style.backgroundimage = 'url(whatever.jpg)';         });      divs[i].onmouseout(function() {             divs[i].style.backgroundimage = 'none';         }); } 

and css only...

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