2 
#border #header-wrapper #header-wrapper-upper #social-top a {
    float: left;
    background: url('../images/social_media.png') no-repeat;
    height: 35px;
    text-decoration: none;
    width: 35px;
}
#border #header-wrapper #header-wrapper-upper #social-top a.twitter {
    background-position: 0 0;
}

#border #header-wrapper #header-wrapper-upper #social-top a.twitter:hover {
    background-position: 0 - 35;
}

#border #header-wrapper #header-wrapper-upper #social-top a.facebook {
    background-position: -35 0;
}

#border #header-wrapper #header-wrapper-upper #social-top a.facebook:hover {
    background-position: -35 - 35;
}


#border #header-wrapper #header-wrapper-upper #social-top a.be {
    background-position: -70 0;
}

#border #header-wrapper #header-wrapper-upper #social-top a.be:hover {
    background-position: -70 - 35;
}

これは私のcssコードですが、ページを表示すると、常にa.twitterが表示され、ホバーしても何も起こらず、a.twitterのままになります。a.facebookの場合もa.twitterecを表示します

これがhtmlコードです-

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>index</title>
        <link rel="stylesheet" href="css/stylesheet.css" />
    </head>
    <body>
        <!-- Header background starts -->
        <div id="header"></div>
        <!-- Header Background ends -->
        <!-- Middle content starts -->
        <div id="border">
            <!-- Header Wrapper starts -->
            <div id="header-wrapper">
                <!-- Header upper Part starts -->
                <div id="header-wrapper-upper">
                    <img src="images/logo.png" alt="Season Logo" title="Season logo" id="logo" />
                    <div id="social-top">
                        <a href="#" class="twitter">&nbsp;</a>
                        <a href="#" class="facebook">&nbsp;</a>
                        <a href="#" class="be">&nbsp;</a>
                    </div>
                </div>
                <!-- Header upper Part ends -->
            </div>
            <!-- Header Wrapper Ends -->
        </div>
        <!-- Middle Content ends -->
    </body>
</html>

手がかりはありますか？初めてスプライトを使用するので、よくわかりません。コンソールにも何も表示されません。

JSfiddle- http: //jsfiddle.net/kEQUw/

4

3 に答える 3

3

背景位置に「px」を追加

元。

  1. 0 -35px
  2. 00
  3. 035px...など。
于 2012-07-14T18:40:28.913 に答える
0

CSSのマイナス記号と35の間に本当にスペースがありますか？バリデーターでCSSとHTMLをチェックしましたか？

于 2012-07-14T18:43:48.137 に答える
0

記録のためだけに。スプライトの作成方法（アイコン間にスペースを入れる）により、spritecowオンラインツールを使用して、スプライトの各要素の正しい値を取得できます。

したがって、正しいコードは次のようになります。

#border #header-wrapper #header-wrapper-upper #social-top a {
    float: left;
    background: url('../images/social_media.png') no-repeat;
    height: 32px; /* not 35 */
    width: 32px;
    text-decoration: none;
    display: block; /* NEW */
}
#border #header-wrapper #header-wrapper-upper #social-top a.twitter {
    background-position: -2px -3px;
}

#border #header-wrapper #header-wrapper-upper #social-top a.twitter:hover {
    background-position: -2px -38px;
}

#border #header-wrapper #header-wrapper-upper #social-top a.facebook {
    background-position: -52px -2px;
}

#border #header-wrapper #header-wrapper-upper #social-top a.facebook:hover {
    background-position: -52px -37px;
}


#border #header-wrapper #header-wrapper-upper #social-top a.be {
    background-position: -103px -2px;
}

#border #header-wrapper #header-wrapper-upper #social-top a.be:hover {
    background-position: -103px -37px;
}
于 2012-07-14T18:54:31.060 に答える