javascript - How to swap a div's image source with another image on hover using jQuery -
i'm having issues changing attributes using jquery
here's code: https://jsfiddle.net/mepygo30/
js: $("#but1").hover(function() { $(this).attr('src', 'css/img1.jpg'); }, function() { $(this).attr('src', 'css/img2.jpg'); }); html: <body> <div id = "but1" class = "button"><img src ="css/img1.jpg"/></div> </body in actual code created class each individual button , put attributes in there , separated each button different id.
i want able change background image of each of buttons such "but1" img2 when mouse hovers on , when mouse leaves changes img1.
thanks
edit: sop jquery code:
<script type="text/javascript"> $(document).ready( $("#but1").hover(function() { $(this).attr('src', 'css/facebook.png'); }, function() { $(this).attr('src', 'css/facebookbw.png'); }) ); </script>
you close on javascript. try changing script following:
$("#but1").hover(function() { $(this).css("background-color", "blue"); }, function() { $(this).css("background-color", "red"); });