Benas Lengvinas Benas Lengvinas - 6 months ago 8
Javascript Question

Hovering over one div changes another's img

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..

Answer

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');
    }
});

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
  }
);