悬停在一个 div 上会改变另一个的 img答案

【问题标题】：Hovering over one div changes another's img悬停在一个 div 上会改变另一个的 img
【发布时间】：2016-09-29 15:49:56
【问题描述】：

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

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

DEMO

但它不起作用..

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

【问题讨论】：

什么是 ekranasStatic。演示 jsfiddle 中没有具有此 id 的 DOM
@Benas，我的回答解决了你的困惑吗？
@Parag Bhayani 它做到了，现在只需要弄清楚将“mouseleave”放在哪里
@BenasLengvinas ：它与 mouseenter 相同，请参阅我的更新答案
啊，是的。有效。只是在 jsfidlle 然而......在我的本地代码中它没有。

标签： javascript jquery image hover

【解决方案1】：

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

从 1.9 开始，不再支持事件名称字符串“hover”作为 “mouseenter mouseleave”的同义词。这允许应用程序附加并触发自定义“悬停”事件。更改现有代码是简单的查找/替换，并且还支持“悬停”伪事件 jQuery Migrate 插件来简化迁移。 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
  }
);

【讨论】：

【解决方案2】：

看起来您需要在鼠标悬停时更改它并在鼠标悬停时重置。如果你使用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

【讨论】：

它可以工作，但是，作为@Parag Bhayani 解决方案，这个只适用于 jsFiddle 而不是我的本地主机。也许你知道这是为什么？
不知何故它在另一个 html 文件中工作......这个肯定有问题

【解决方案3】：

改一下

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

到：

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

【讨论】：

hover 不是一个事件。我不认为它可以在on()内部使用。

【解决方案4】：

试试这个：

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

Js Fiddle Updated

【讨论】：