Как удалить функцию наведения JS на мыши?

Question

Я нашел следующий код js для замены фона родительского div ссылкой в ​​дочернем div, но состояние зависания остается на месте, а не возвращается в исходное состояние, на мыши. Может ли кто-нибудь помочь мне настроить код, чтобы вернуть фон родительского div после мыши из ссылки? Заранее спасибо.

$('.background-changer').on('mouseover', 'a', function() { 

    var background = "url('" + $(this).attr('data-background') + "')"; 

    $('.background-changer').css('background-image', background) 
}); 

}); 


    <div id="navBar" style="background: url(images/navigation-background-0.gif);" class="background-changer"> 
       <div id="navBarCell1"><a href="#" title="Resort" target="_parent" data-background="images/navigation-background-1.gif">Resort</a></div> 
</div> 

#navBar { 
    height: 38px; 
    width: 760px; 
    float: right; 
    background-repeat: no-repeat; 
} 
#navBarCell1 { 
    float: left; 
    width: 75px; 
    text-align: center; 
    height: 26px; 
    overflow: hidden; 
    margin: 0px; 
    padding-top: 9px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
} 
#navBarCell1 a:link { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 10px; 
    text-transform: lowercase; 
    color: #000; 
    text-align: center; 
    text-decoration: none; 
    padding: 20px; 
    margin-top: 10px; 
} 

Answer 1

Вы можете сохранить то, что у вас есть, но перед установкой фона на URL в ссылке, добавить атрибут данных в родительском DIV с текущим фоновым URL. Затем привяжите событие mouseout и установите его так:

var bgChanger = $('.background-changer'); 
bgChanger.on('mouseenter', 'a', function() { 
var background = "url('" + $(this).attr('data-background') + "')"; 

bgChanger.data('original-background', bgChanger.css('background-image')).css('background-image', background); 
} 

bgChanger.on('mouseout', function(){ 
    bgChanger.css('background-image', bgChanger.data('originalBackground')); 
}); 

Я не тестировал это, но он должен работать.

Answer 2

Если вам действительно нужно сделать это с помощью JS вы можете использовать функцию парения так:

Working Example 1

$('#navBar').hover(function() { 
    $('#navBar').css({ 
     'backgroundImage': 'url(---)' // image 2 
    }); 
}, 
function() { 
    $('#navBar').css({ 
     'backgroundImage': 'url(---)' // image 1 
    }); 
}); 

API documentation for .hover()

Но SLaks упомянутых в комментариях предпочитаемых метод, вероятно, будет просто использовать CSS :hover следующим образом:

Working Example 2

#navBar { 
    height: 38px; 
    width: 100%; 
    background-image: url(---); /* image 1 */ 
    background-size:20px; 
} 
#navBar:hover{ 
    background-image: url(---); /* image 2 */ 
} 

MDN documentation for :hover