Hovering over one div changes another's img

Question

I need to change an image of one div while hovering over another. So far i have this

$('#button').on({
    'hover': function(){
        $('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
    }
});

DEMO

But it doesn't work..

EDIT While it works in fiddle, the solution does not work in my local file.

Answer 1

Hover is deperecated with latest versions of jQuery. it is divided into two events mouseenter and mouserleave. use those event it will be helpful

As of 1.9, the event name string "hover" is no longer supported as a synonym for "mouseenter mouseleave". This allows applications to attach and trigger a custom "hover" event. Changing existing code is a simple find/replace, and the "hover" pseudo-event is also supported in the jQuery Migrate plugin to simplify migration. Reference

$('#button').on({
    'mouseenter': function(){
        $('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
    }
});

$('#button').on({
    'mouseleave': function(){
        $('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/some_other.png');
    }
});

If you still want to use hover events then there is direct hover function provided by jQuery, with reference

$( "td" ).hover(
  function() {
    $('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
  }, function() {
    // change to default on hover out
  }
);