更改li懸停的背景圖像;當我得到李時如何改回來？

我想要將鼠標懸停在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開發一個簡單的編輯，但我似乎無法找到我必須添加/更改的內容。

謝謝！我希望我清楚（如果不是我想更多地解釋）

來源

2017-04-14 richolio

感謝張貼你的CSS，JS和HTML！小提示 - 如果您將其添加到可運行的代碼段中，這將使其他人更容易快速查看正在發生的情況並進行回答。 –

@ControlAltDel謝謝，我見過那一個！但我的JS與那個不同，我似乎無法找到如何改變我的（我對此很陌生）。 – richolio

@JohnVandivier謝謝！我怎麼做？：P – richolio

可以將此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/

來源

2017-04-14 13:23:51 Johannes

謝謝！這工作:)另一個問題壽; 背景：線性梯度（45deg，rgb（0,255,162）0，rgb（0,196,196）50％，rgba（0，196，196）時，它如何不再起作用（11,169,199,0.32）100％），url（../ img/photo2.jpg）！important;' 而不僅僅是一張照片？它不會以這種方式改變 – richolio

因爲上述解決方案解決了'background-image'屬性，而您正在使用'background'屬性 - 兩個不同的東西正式......但它可以工作，如果你使用原始的'背景'你在JS中引用的規則，看到這個jsfiddle：https：//jsfiddle.net/k9tek70L/ – Johannes

在這裏，你去！使用.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>

來源

2017-04-14 13:19:10

您可以使用jQuery的鼠標離開事件。

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

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

來源

2017-04-14 13:20:11 Driblou

更改li懸停的背景圖像;當我得到李時如何改回來？

回答

相關問題