0

私は、主にナビゲーションの目的で、画像置換技術を実践しようとしています。なぜ機能しないのか理解できないようです。ホバーは機能しますが、デフォルトのメニュー項目は機能しません。私は物事が正しく書かれているとかなり確信しています。

http://lrroberts0122.github.com/DWS/practical/index.html

ナビゲーションのHTMLは次のとおりです。

<ul id="nav">
    <li id="process"><a href="index.html" id="active">Our Process</a></li>
    <li id="function"><a href="function.html">Bio-Built Function</a></li>
    <li id="future"><a href="future.html">The Future</a></li>
    <li id="engage"><a href="engage.html">Engage Dio</a></li>
</ul>

これがナビゲーション用の私のCSSです：

#nav {
    list-style: none;
    width: 244px;
    height: 124px;
    overflow: hidden;
    }

#nav li {
    float: left;
    }

#nav li a {
    width: 244px;
    height: 30px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    background: url('../img/bg_nav.png');
    }

#process {
    background-position: 0 0;
    }

#process:hover {
    background-position: -244px 0;
    }

#function {
    background-position: 0 -31px;
    }

#function:hover {
    background-position: -244px -31px;
    }

#future {
    background-position: 0 -60px;
    }

#future:hover {
    background-position: -244px -62px;
    }

#engage {
    background-position: 0 -90px;
    }

#engage:hover {
    background-position: -244px -93px;
    }
4

2 に答える 2

2

まず、あなたが書いたセレクターの1つが、私がWebサイトに表示しているものと一致していません。それ#nav li aは#nav liあなたのWebサイトにあります。

次に、CSSセレクターの特異性に注意する必要があります。

#nav li

却下します：

#process

しかし：

#nav #process

却下されることはありません。

ここで特異性に関する非常に良い記事を見つけることができます：http：//coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

于 2012-10-17T13:50:24.110 に答える
0

私は含めるでしょう：

#nav li a {
    width: 244px;
    height: 30px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    background: url('../img/bg_nav.png');
    }

#process内（ちなみにクラスの方がうまくいくかもしれません）

 #process {
        width: 244px;
        height: 30px;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        background: url('../img/bg_nav.png');

HTMLではなくCSSの#navliaを取り除き、次のことを試してください。

 #process {
        width: 244px;
        height: 30px;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        background: url('../img/bg_nav.png');
        background-position: 0 0;
}

 #process:hover {
    background-position: -244px 0;
}

機能などの機能など...

私が何かを逃したか、あなたが質問をするならば、コメントに含めてください。

于 2012-10-17T14:18:01.547 に答える