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

Question

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

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

DEMO

但是没用..

编辑虽然它在 fiddle 中有效，但该解决方案在我的本地文件中无效。

Answer 1

改变这个

$('#button').on({
    'hover': function(){

至：

  $('#button').hover({ function(){ });

Answer 2

最新版本的 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
  }
);

Answer 3

试试这个：

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

Js Fiddle Updated

Answer 4

看来您需要在鼠标悬停时更改它并在鼠标移出时重置。如果你使用 data-* 属性会更容易。

$('#button').hover(function() {
  var img = $('#ekranasStatic').data('toggle-src');
  $('#ekranasStatic').attr('src', img);
}, function() {
  var img = $('#ekranasStatic').data('original-src');
  $('#ekranasStatic').attr('src', img);
});

.img {
  /*** TURI BUT 850 PX **/
  position: absolute;
  margin-left: 520px;
  top: 110px;
  z-index: 99;
}
#button {
  width: 50px;
  height: 70px;
  display: block;
  position: absolute;
  top: 296px;
  left: 1120px;
  background: url("http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/knopkes_zpsp3qr4xyn.png") no-repeat;
  z-index: 2200;
  cursor: pointer;
}
#button:focus {
  outline: none;
}
#button:hover {
  animation: knopke 0.1s steps(2);
  animation-fill-mode: forwards;
  background-position: 0 0;
}
@keyframes knopke {
  to {
    background-position: -100px;
    opacity: 1;
  }
}
#ekranasStatic {
  width: 735px;
  height: 602px;
  display: block;
  position: absolute;
  top: 120px;
  left: 375px;
  z-index: 10000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<img class="img" src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/galerija3_zpszlnkhebp.png">
<div id="button"></div>
<div id="ekranai">
  <img id="ekranasStatic" src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranasStatic_zpswrnrw7f8.png" data-original-src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranasStatic_zpswrnrw7f8.png" data-toggle-src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png"
  />
</div>

Updated Fiddle

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

Hovering over one div changes another's img

javascript

jquery

image

hover