1

ナビゲーションバーのスプライトを作成して、javascript / Jqueryを使用して、ホバーのオン/オフ状態を簡単に切り替えられるようにしました。私の質問は、私のcssがcssクラス＃whatIS1031＃1031Exchangeを表示しているのか、＃howToStartが表示されていないのかわからないということです。

これが私のHTMLです

 <ul id="nav">
            <li class="nav-button" id="home"><a href="Index.html"></a></li>
            <li class="nav-button" id="whatIS1031"><a href="whatIs1031.html"></a></li>
            <li class="nav-button" id="1031Exchange"><a href="exchangeRequ.html"></a></li>
            <li class="nav-button" id="typesOfExchange"><a href="typesOfExchange.html"></a></li>
            <li class="nav-button" id="whyCLX"><a href="howToStart.html"></a></li>
            <li class="nav-button" id="howToStart"><a href="whyCLX.html"></a></li>
            <li class="nav-button" id="resources"><a href="resources.html"></a></li>
            <li class="nav-button" id="faq"><a href="fAQs.html"></a></li>
            <li class="nav-button" id="fee"><a href="fees.html"></a></li>
            <li class="nav-button" id="contactUs"><a href="contactUs.html"></a></li>
        </ul>
        <!--End of nav-->

これが私のCSSです

#home, #home, #whatIs1031, #whatIs1031, #h-1031Exchange, #h-1031Exchange, #typesOfExchange, #h-typesOfExchange, #whyCLX, #h-whyCLX, #h-howToStart, #h-howToStart, #resources, #h-resources, #faq, #h-faq, #fee, #h-fee, #contactUs, #h-contactUs{
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat;
}

#h-home{
    background-position: -222px 0;
    width: 225px;
    height: 30px;
}

#home{
    background-position: 0 0;
    width: 225px;
    height: 30px;
}

#whatIs1031{
    background-position: 0 36px;
    width: 225px;
    height: 30px;
}

#h-whatIs1031{
    background-position: -223px -36px;
    width: 225px;
    height: 30px;
}

#1031Exchange{
    background-position: 0 -72px;
    width: 225px;
    height: 30px;
}

#h-1031Exchange{
    background-position: -224px -73px;
    width: 225px;
    height: 30px;
}

#typesOfExchange{
    background-position: 0 -111px;
    width: 225px;
    height: 30px;
}

h-typesOfExchange{
    background-position: -226px -112px;
    width: 225px;
    height: 30px;
}

#h-whyCLX{
    background-position: -227px -150px;
    width: 225px;
    height: 30px;
}

#whyCLX{
    background-position: 0 -150px;
    width: 225px;
    height: 30px;
}

#howToStart{
    background-position: 0 -190px;
    width: 225px;
    height: 30px;
}

#h-howToStart{
    background-position: -230px -189px;
    width: 225px;
    height: 30px;
}

#h-resources{
    background-position: -230px -226px;
    width: 225px;
    height: 30px;
}

#resources{
    background-position: 0 -227px ;
    width: 225px;
    height: 30px;
}

#faq{
    background-position: 0 -264px ;
    width: 225px;
    height: 30px;
}

#h-faq{
    background-position: -230px -263px ;
    width: 225px;
    height: 30px;
}

#fee{
    background-position: 0 -302px ;
    width: 225px;
    height: 30px;
}

#h-fee{
    background-position: -231px -300px ;
    width: 225px;
    height: 30px;
}

#contactUs{
    background-position: 0 -341px ;
    width: 225px;
    height: 30px;
}

#h-contactUs{
    background-position: -231px -337px ;
    width: 225px;
    height: 30px;
}

これがcodepenhttp : //codepen.io/Austin-Davis/pen/Fdhejの私のコードです。これがphotobuckethttp:
//s1287.beta.photobucket.com/user/debuggingfool/media/nav_zps03a73d67の私のスプライトのコピーです。 png.html

4

2 に答える 2

3

このプロジェクトの HTML と CSS はすべてオーバーホールに値しますが、特定の質問に対する回答は次のとおりです。

  • whatIS1031大文字のため表示されません。要素の ID には大文字の 'S' ( whatIS1031) があり、CSS セレクターには小文字の 's' ( whatIs1031) があります。
  • howToStartの最初の CSS 宣言に欠落しているため、表示されませんbackground:url()。代わりに、#h-howToStart2回表示されます。

補足: Chrome の開発ツールまたは Firefox の Firebug を試してみてください。どちらも、DOM 要素を調べて、どの CSS スタイルが適用されているかを確認する方法を備えています。そこから、どのスタイルが欠落しているかを確認できます。

于 2013-01-09T18:37:11.760 に答える
2

ここで言及されている特定の ID 命名の問題に加えて、CSS には完全な解決策があるため、javascript でこれを行う理由はありません。

例として #home を使用してみましょう。

#home {
    background-position: 0 0;
}

#home:hover {
    background-position: -222px 0;
}

これを要素ごとに繰り返します。CSS を最適化することもできます。

特にすべての ID に背景画像を適用する代わりに -

#home, #home, #whatIs1031, #whatIs1031, #h-1031Exchange, #h-1031Exchange, #typesOfExchange, #h-typesOfExchange, #whyCLX, #h-whyCLX, #h-howToStart, #h-howToStart, #resources, #h-resources, #faq, #h-faq, #fee, #h-fee, #contactUs, #h-contactUs{
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat;
}

要素に既に適用したクラスを使用します。

.nav-button {
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat;
}

また、すべて同じサイズの場合、各 ID に要素サイズを個別に割り当てる必要はありません。ただ使う -

.nav-button {
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat;
    width:225px;
    height:30px;
}
于 2013-01-09T18:44:24.447 に答える