在 li 悬停时更改背景图像；当我得到 li 时如何更改回来？

Question

我想在悬停在 li 元素上时更改 div 的背景图像。这个我已经想通了，正如你在这个 https://jsfiddle.net/7zpt7g6b/ 中看到的那样！ :) 唯一的问题是，当我将鼠标悬停在 li 元素上时，我想将图片改回原来的 CSS（希望我说得清楚）。现在 background-image 的 div 一直显示我悬停的最后一个 li 的图像。我要改回来

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

我的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%;
}

我的 JS

var links = $(".projects li");

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

这可能只是对 Jquery 的简单编辑，但我似乎无法找出我必须 add/change 的内容。

谢谢！我希望我说清楚了（如果不是我很乐意解释更多）

Answer 1

给你！使用 .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>

Answer 2

您可以使用 jQuery 的 mouseleave 事件。

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

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

Answer 3

您可以将此 mouseout 函数添加到 JS，使用原始 CSS 规则中背景图像的 URL：

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/

在 li 悬停时更改背景图像；当我得到 li 时如何更改回来？

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

html

javascript

css

jquery

background-image