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

Posted 2023-05-08

【中文标题】悬停在一个 div 上会改变另一个的 img

【英文标题】：Hovering over one div changes another's 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 然而......在我的本地代码中它没有。

【参考方案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