0

学習目的で Web サイトを設計していますが、何らかの理由でナビゲーション バーがすべてのタブで「ホバー」状態のままになっています。私がフォローしているチュートリアルはかなり詳細ですが、コードを何時間も調べてきたので、問題を理解するのに十分な知識がないと思います. トラブルシューティング中に、ソースコードを見て (サンプルから) コピーしましたが、まだ同じ問題があります。ボタンはすべて「常に」ホブ状態であるため、Java Script は何もしていないように見えます。

チュートリアル: http://www.shopdev.co.uk/blog/animated-menus-using-jquery/

このために作成した 3 つの画像があります (チュートリアルとは少し異なります)。

bkrd.png = 高さ 400 ピクセルの狭い画像で、ツールバーの背景を繰り返します (メニュー タブなし) spritedown.png = 通常のボタンの状態を示すスプライト (ホームとポートフォリオ) 高さ 81 ピクセルの
spriteover.png = ボタンのホバー状態を示すスプライト。高さ81ピクセル

私のコード:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Animated Menu Demo</title>

<style>
body {
    background-color:#333333;
    margin:0;
}



/* Menu Body */
ul#menu {
    width:80%;
    height:400px;
    background:url(bkrd.png) repeat-x;
    list-style:none;
    margin:0;
    padding:0;
    padding-top:109px; /* distance from top where i need the sprite to start*/
    padding-left:20%;
}

/* Float LI Elements - horizontal display */
ul#menu li {
    float:left;
}

/* Link - common attributes */
ul#menu li a {
    background:url(spritedown.png) no-repeat scroll top left;
    display:block;
    height:81px;
    position:relative;
}

/* Specify width and background position attributes specifically for the class: "home" */
ul#menu li a.home {
    width:159px;
    background-position:0px 0px;
}

/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.portfolio {
    width:157px;
    background-position:-159px 0px;
}

/* Span (on hover) - common attributes */
ul#menu li a span {
    background:url(spriteover.png) no-repeat scroll bottom left;
    display:block;
    position:absolute;
    top:0;
    left:0;
    height:81px;
    width:100%;
    z-index:100;
}

/* Span (on hover) - display pointer */
ul#menu li a span:hover {
    cursor:pointer;
}

/* Shift background position on hover for the class: "home" */
ul#menu li a.home span {
width:159px;
    background-position:0px 0px;
}

/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.portfolio span {
    background-position:-159px 0px;
}
</style>

スクリプト：

<!-- Include jQuery Library -->
<script src="jquery-1.2.2.pack.js" type="text/javascript"></script>

<!-- Let's do the animation -->
<script type="text/javascript">
$(function() {
    // set opacity to nill on page load
    $("ul#menu span").css("opacity","0");
    // on mouse over
    $("ul#menu span").hover(function () {
        // animate opacity to full
        $(this).stop().animate({
            opacity: 1
        }, 'slow');
    },
    // on mouse out
    function () {
        // animate opacity to nill
        $(this).stop().animate({
            opacity: 0
        }, 'slow');
    });
});
</script>
</head>

本体:

<body>
<ul id="menu">
    <li><a href="#" class="home"><span></span></a></li>
    <li><a href="#" class="portfolio"><span></span></a></li>
</ul>
</body>

</html>
4

1 に答える 1

0

jquery スクリプトの jsfiddle をオンにしていません... jquery.js を に含めていますheadか? http://jsfiddle.net/7JxMF/1/の jquery を使用した jsfiddle

于 2013-01-19T00:42:54.837 に答える