0

For this new website I'm creating, I'm trying to get one background to fade into another when I hover on a link. I don't want the link to change, just the background. I found some good jQuery to get the background to change, but there's no fade effect and my knowledge of jQuery is limited. Here's what I have so far:

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>

If anyone has any other suggestions on how to do this, that would be great. This is just what I found. Thank you so much for helping!

4

1 回答 1

0

这是在不隐藏链接的情况下执行此操作的方法。它还做了一个很好的交叉淡入淡出，而不是完全淡出，然后再回来。

在其中有两个 div#container绝对定位为 100%width和height，以及z-index-1 的 a。这些 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();
});

这是小提琴

于 2012-12-17T19:49:22.240 回答