Looking to update the background image of a div upon hovering over a li element? Check out this example here. So far, I've got that part working fine. But now I want the background picture to revert back to its original CSS when I move away from the li element. Currently, the div retains the last li's image even after hover.
Here's My HTML:
<section class="content">
<div class="projects">
<ul>
<li data-background="https://static.pexels.com/photos/7045/pexels-photo.jpeg"><a href="#">CASE I</a></li>
<li data-background="https://static.pexels.com/photos/132037/pexels-photo-132037.jpeg"><a href="#">CASE II</a></li>
<li data-background="https://iso.500px.com/wp-content/uploads/2016/11/stock-photo-159533631-1500x1000.jpg"><a href="#">CASE III</a></li>
<li data-background="https://static.pexels.com/photos/7045/pexels-photo.jpeg"><a href="#">CASE IV</a></li>
</ul>
</div>
<div id="background">
<h1 style="color:#fff;">RICHIE / WEB DESIGN / UI / UX / BLABLABLA</h1>
</div>
</section>
My CSS:
.projects ul{
list-style-type:none;
}
.projects a{
display:inline-block;
padding:10px;
text-decoration: none;
color:#434343;
font-size: 20px;
text-transform: uppercase;
font-family: 'Sorts Mill Goudy', serif;
line-height: 20px;
text-indent: -50px;
}
.projects a:hover{
}
.projects ul:hover li {
opacity: .5;
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
}
.projects ul li:hover {
opacity: 1;
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
}
#background {
background: url("https://www.aviary.com/img/photo-landscape.jpg");
width: 50%;
height: 100%;
position: fixed;
background-size: cover;
padding:50px;
background-position: center 30%;
}
My JS:
var links = $(".projects li");
links.on("mouseover",function(){
var url = $(this).attr("data-background");
$("#background").css("backgroundImage","url("+url+")");
});
I believe it might just require a minor adjustment in the JQuery code, but I'm struggling to pinpoint exactly what needs to be added or altered.
Thank you for your assistance! If my explanation is unclear, please let me know so I can provide further clarification.