I came across this JavaScript code that swaps the background of a parent div when clicking on a link in a child div. However, I noticed that the hover state remains even after moving the mouse out of the link. Can someone help me modify the code so that the parent div's background returns to its original state after moving the 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;
}