Question

对于我正在创建的这个新网站，当我将鼠标悬停在链接上时，我正试图让一个背景淡入另一个背景。我不希望链接改变，只是背景。我找到了一些好的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>

如果有人对如何做到这一点有任何其他建议，那就太好了。这正是我发现的。非常感谢您的帮助！

Answer 1

以下是如何在不隐藏链接的情况下执行此操作。它也有一个很好的交叉渐变，而不是完全淡出，然后回来。

在#container中有两个div，绝对定位为100％width和height，z-index为-1。这些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

在悬停时淡出到不同的div背景图像

1 个答案: