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

Question

I want to change the background image of a div when I hover over a li element. This I have figured out, as you can see in this https://jsfiddle.net/7zpt7g6b/! :) The only thing is that I want to change the pic back to the original CSS when I hover of the li element (hope I'm being clear). Now the div of the background-image keeps having the image of the last li I have hovered on. I want this to 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: 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+")");
});

It's probably just a simple edit on the Jquery, but I can't seem to find out what I have to add/change.

Thank you! I hope I'm being clear (if not I'd love to explain more)

thanks for posting your css, js, and html! Small tip - If you add it into a runnable snippet this will make it easier for others to quickly see what's going on and answer. — John Vandivier, Apr 14 '17 at 13:15
@ControlAltDel Thanks, I've seen that one! But my JS is different than that one and I can't seem to find out how to change mine to that (I'm kind of new to this). — richolio, Apr 14 '17 at 13:22
Awesome that you asked! When you are in the question text editor you will see icons for bold, italics, link, quote, code sample, image, and finally the code snippet. Click that icon and the tool will pop up. — John Vandivier, Apr 14 '17 at 13:25

score 2 · Accepted Answer · answered Apr 14 '17 at 13:23

2

You can add this mouseout function to the JS, using the URL of the background-image in your 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/

answered Apr 14 '17 at 13:23

Johannes

64,305
18
73
130

Thank you! This worked :) Another question tho; How come it doesn't work anymore when I have a background like this `background: linear-gradient(45deg,rgb(0, 255, 162) 0,rgb(0, 196, 196) 50%,rgba(11, 169, 199, 0.32) 100%), url(../img/photo2.jpg) !important;` And not just a photo? It doesn't change anymore this way – richolio Apr 14 '17 at 13:51
Because the above solution addresses the `background-image` property, whereas you are using the `background` property - two different things officially... But it can work if you use the original `background` rule you quoted in the JS, see this jsfiddle: https://jsfiddle.net/k9tek70L/ – Johannes Apr 14 '17 at 14:05

score 0 · Answer 2 · answered Apr 14 '17 at 13:19

Here you go! use .mouseleave()

var links = $(".projects li"),
    sDefaultUrl = 'https://www.aviary.com/img/photo-landscape.jpg';

links
.mouseover(function(){
    var sUrl = $(this).attr("data-background");
    $("#background").css("backgroundImage","url(" + sUrl + ")");
})

.mouseleave("mouseover",function(){
    var url = $(this).attr("data-background");
    $("#background").css("backgroundImage","url(" + sDefaultUrl + ")");
});

.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%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

score 0 · Answer 3 · answered Apr 14 '17 at 13:20

0

You can use jQuery's mouseleave event.

https://api.jquery.com/mouseleave/

links.mouseleave(function(){
    var url = $(this).attr("data-background");
    $("#background").css("backgroundImage","url("+[your-original-url]+")");
});

answered Apr 14 '17 at 13:20

Reyedy

918
2
13
36

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

3 Answers3