0

私が作成しているこの新しいWebサイトでは、リンクにカーソルを合わせたときに、ある背景を別の背景にフェードインさせようとしています。リンクを変更したくありません。背景だけを変更します。背景を変更するのに適した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>

誰かがこれを行う方法について他に何か提案があれば、それは素晴らしいことです。これは私が見つけたものです。助けてくれてありがとう！

4

1 に答える 1

0

リンクを非表示にせずにそれを行う方法は次のとおりです。また、完全にフェードアウトしてから戻るのではなく、素敵なクロスフェードも行います。

その中に 2 つの div を#container配置し、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();
});

これがフィドルです

于 2012-12-17T19:49:22.240 に答える