Search code examples
javascriptjqueryhtmlimagesrc

Replacing image source on mouse hover

Trying to have a different image show up on a mouseover event. Using the following JavaScript:

$('div.row-fluid').hover(function() {
    $(this).find('img').attr('src','http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg');
 }, function() {
    $(this).find('img').attr('src','http://leandrovieira.com/projects/jquery/lightbox/photos/image2.jpg');
 });​

And the following HTML:

<div class="span27 offset1" style="margin-top: -3.2em">
      <div class="searchbutton"><img src='http://leandrovieira.com/projects/jquery/lightbox/photos/image2.jpg''></div>
</div>

But no luck. What's the problem? Fiddle: http://jsfiddle.net/mpmqm/2/

Solution

  • Add row-fluid as a class name to your container. http://jsfiddle.net/mpmqm/3/