褪色到悬停的不同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背景图像

回答

相关问题