Question

当我将鼠标悬停在li元素上时，我想更改div的背景图像。我已经想到了，正如你在https://jsfiddle.net/7zpt7g6b/中看到的那样！ :)唯一的事情是，当我悬停li元素时，我想将图片更改回原始CSS（希望我很清楚）。现在背景图像的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的一个简单编辑，但我似乎无法找出我必须添加/更改的内容。

谢谢！我希望我很清楚（如果不是我想解释更多）

Answer 1

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

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/

Answer 2

你走了！使用.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 3

您可以使用jQuery的 mouseleave 事件。

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

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

改变li悬停时的背景图像;当我得到李的时候怎么改回来？

3 个答案: