Наведите указатель мыши на один div, измените чужие img

Question

Мне нужно изменить изображение одного div, зависающего над другим. До сих пор у меня есть этот

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

DEMO

Но он не работает ..

EDIT Пока он работает в скрипку, решение не работает в моем локальном файле.

Answer 1

Hover является deperecated с последними версиями JQuery. он разделен на два события mouseenter и mouserleave. не использовать эти события, это будет полезно

По состоянию на 1.9, название события строка «парить» больше не поддерживается как синоним «MouseEnter MouseLeave». Это позволяет приложениям подключать и запускать пользовательское событие «зависания». Изменение существующего кода - это простой поиск/замена , а псевдо-событие «hover» также поддерживается в плагине 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

изменить это

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

к:

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

Answer 3

попробовать это:

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

Js скрипку 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