javascript - 将鼠标悬停在一个 div 上会更改另一个的 img

Question

我需要在将鼠标悬停在另一个 div 上时更改一个 div 的图像。到目前为止我有这个

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

DEMO

但是没用..

编辑虽然它在 fiddle 中工作，但该解决方案在我的本地文件中不起作用。

Answer 1

悬停在最新版本的 jQuery 中已弃用。它分为两个事件 mouseenter 和 mouserleave。使用这些事件会有帮助

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

如果你仍然想使用悬停事件，那么jQuery 提供了直接的悬停功能，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
  }
);