褪色到懸停的不同div背景圖像

對於我創建的這個新網站，我試圖讓一個背景淡入另一個當我懸停在鏈接上。我不希望鏈接改變，只是背景。我發現了一些很好的jQuery來改變背景，但沒有淡化效果，我對jQuery的瞭解有限。這是我到目前爲止有：褪色到懸停的不同div背景圖像

的Html

<div id="container"> 
     <a id="linktomouseover" href="http://delusion.submittable.com/submit" alt="Submit to Delusion" style="position: absolute; width: 275px; height: 99px; top: 354px; left: 263px; display: block;"> </a> 
    </div>

的CSS

#container { 
    position:relative; 
    height:600px; 
    width:800px; 
    margin:0 auto; 
    background: url(Images/website-header1.png) center top no-repeat; 
    border: 1px solid #ffffff; 
}

JQuery的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> 
    <script> 
     $(function() { 
      $("#container a").hover(function() { // Changes the #main divs background to the rel property of the link that was hovered over. 
      $("#container").css("background", "url(Images/website-header2.png)"); 
     }, function() { // Sets the background back to the default on hover out 
      $("#container").css("background", "url(Images/website-header1.png)"); 
      }); 
     }); 
</script>

如果有人公頃如何做到這一點的任何其他建議，這將是很好的。這正是我發現的。非常感謝您的幫助！

來源

2012-12-17 Echo Martin

在同一時間而褪色兩幅圖像，就需要兩個圖像，或在您的情況兩個具有不同背景的元素，然後淡入/淡出元素，因爲您無法淡化背景屬性。要淡出，交換圖像，然後淡入，一個元素就足夠了。 – adeneo

看看這個答案： http://stackoverflow.com/questions/6948758/css-fade-between-background-images-on-hover –

其中一個圖像是黑色背景與白色文本。這是背景屬性。我想在背景上淡出一幅圖像，其背景質量很差。我目前的背景圖像並不需要消失或淡入淡出。當我將鼠標懸停在圖像頂部的鏈接上時，其他圖像只需淡入。 –

下面是如何做到這一點，而不隱藏鏈接。它也做了很好的淡入淡出，而不是淡出完全，然後回來的。

有內#container 2周的div是絕對定位，100％width和height，和-1 z-index。每個div都包含你的背景圖片。你在懸停時換掉它們。在我的例子中，爲了方便起見，我使用了背景顏色，但是你明白了。

<div id="container"> 
    <div id="one"></div> 
    <div id="two"></div> 
    <a href="#">The Link</a> 
</div>

...

#container { 
    margin: 100px; 
    position: relative; 
} 

#container a { 
    color: white; 
} 

#container div { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
} 

#one { 
    background-color: blue; 
} 

#two { 
    background-color: green; 
    display:none; 
}

...

$("#container a").hover(function() { 
    $("#container div:visible").fadeOut(); 
    $("#container div:hidden").fadeIn(); 
});

Here's the fiddle

來源

2012-12-17 19:49:22 Grinn

褪色到懸停的不同div背景圖像

回答

相關問題