悬停时淡入不同的 div 背景图像答案

【问题标题】：Fade to different div background image on hover悬停时淡入不同的 div 背景图像
【发布时间】：2012-12-18 04:11:12
【问题描述】：

对于我正在创建的这个新网站，当我将鼠标悬停在链接上时，我试图让一个背景淡入另一个背景。我不希望链接改变，只是背景。我找到了一些好的 jQuery 来改变背景，但是没有淡入淡出效果，而且我对 jQuery 的了解有限。这是我目前所拥有的：

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>

如果有人对如何执行此操作有任何其他建议，那就太好了。这正是我发现的。非常感谢您的帮助！

【问题讨论】：

要同时淡化两个图像，您需要两个图像，或者在您的情况下需要两个具有不同背景的元素，然后淡入/淡出元素，因为您不能只淡化背景财产。要淡出、交换图像然后淡入，一个元素就足够了。
看看这个答案：stackoverflow.com/questions/6948758/…
其中一张图片是黑底白字。那是背景属性。我想淡入背景顶部的图像，它具有朦胧的质量。我目前拥有的背景图像并不需要消失或淡入淡出。当我将鼠标悬停在图片顶部的链接上时，另一张图片只需要淡入即可。

标签： jquery fadein fadeout

【解决方案1】：

以下是如何在不隐藏链接的情况下执行此操作。它还可以很好地交叉淡入淡出，而不是完全淡出，然后再重新淡入。

在#container 中有两个 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

【讨论】：