javascript - Change background-image on li hover; how to change back when I get of the li? -

this question has answer here:

• removing class mouse exit 7 answers

i want change background image of div when hover on li element. have figured out, can see in https://jsfiddle.net/7zpt7g6b/! :) thing want change pic original css when hover of li element (hope i'm being clear). div of background-image keeps having image of last li have hovered on. want change back

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: 0.3s ease-in-out 0s;         -moz-transition: 0.3s ease-in-out 0s;         -webkit-transition: 0.3s ease-in-out 0s;         -o-transition: 0.3s ease-in-out 0s;     }      .projects ul li:hover {         opacity: 1;          transition: 0.3s ease-in-out 0s;         -moz-transition: 0.3s ease-in-out 0s;         -webkit-transition: 0.3s ease-in-out 0s;         -o-transition: 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+")"); }); 

it's simple edit on jquery, can't seem find out have add/change.

thank you! hope i'm being clear (if not i'd love explain more)

you can add mouseout function js, using url of background-image in original css rule:

links.on("mouseout",function(){     var url = $(this).attr("data-background");     $("#background").css("backgroundimage","url('https://www.aviary.com/img/photo-landscape.jpg')"); }); 

https://jsfiddle.net/t0n0u5yv/