Question

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

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

DEMO

但它不起作用..

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

Answer 1

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

Answer 2

看起来您需要在鼠标悬停时更改它并在mouseout上重置。如果您使用data-*属性，则会更容易。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Updated Fiddle

Answer 3

更改此

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

到：

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

Answer 4

试试这个：

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

Js Fiddle Updated

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

4 个答案: