How can I remove a JS hover function on mouseout?

How can I remove a JS hover function on mouseout?

I found the following js code to swap the background of a parent div by a
link in a child div, but the hover state stays in place, rather than
returns to the original state, on mouseout. Can anyone help me adjust the
code to return the parent div's background after mouse out of the link?
Thank you in advance.
$('.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;
}