0

ナビゲーション メニューを作成しましたが、リンクを含む li アイテムにカーソルを合わせたときにリンクが表示されないのはなぜですか?

これがリンクを含む私の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="exchange1031"><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>

これは、各リスト項目を表示するスプライトへの参照を含む私の css です。

#home, #home, #whatIs1031, #exchange1031, #typesOfExchange, #h-typesOfExchange, #whyCLX, #h-whyCLX, #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;
    width: 225px;
    height: 30px;
}

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

#home{
    background-position: 0 0;
}

#whatIs1031{
    background-position: 0 -36px;
}

#whatIs1031:hover{
    background-position: -223px -36px;
}

#exchange1031{
    background-position: 0 -72px;
}

#exchange1031:hover{
    background-position: -224px -73px;
}

#typesOfExchange{
    background-position: 0 -111px;
}

#typesOfExchange:hover{
    background-position: -226px -112px;
}

#whyCLX:hover{
    background-position: -227px -150px;
}

#whyCLX{
    background-position: 0 -150px;
}

#howToStart{
    background-position: 0 -190px;
}

#howToStart:hover{
    background-position: -230px -189px;
}

#resources:hover{
    background-position: -230px -226px;
}

#resources{
    background-position: 0 -227px ;
}

#faq{
    background-position: 0 -264px ;
}

#faq:hover{
    background-position: -230px -263px ;
}

#fee{
    background-position: 0 -302px ;
}

#fee:hover{
    background-position: -231px -300px ;
}

#contactUs{
    background-position: 0 -341px ;
}

編集: これはコード ペンのデモ ページですhttp://codepen.io/Austin-Davis/pen/Fdhej

4

4 に答える 4

3

タグ<a></a>にリンクの名前を入れてみてください... xD

<a>name of link</a>

または、テキストのないフィールドが好きな場合は、タグ<li>内のタグを使用します<a>

<a href="www.google.com"><li class="nav-button"></li></a>

この例jsfiddleを参照してください

ご挨拶。

于 2013-01-09T22:34:35.620 に答える
3

アンカー タグ ( <a>) はインライン要素です。それらにはコンテンツがないため、レンダリングされず、背景しかありません。

それらに情報を入力するか (例: スプライトの代わりにリンクの実際の名前) 、アンカー タグで非改行スペース エンティティ&nbsp; を使用します。 display: block両方の手法を組み合わせることもできます。

編集：具体的な例について尋ねたので：

#nav a { display:block; }

<ul id="nav">
    <li class="nav-button" id="home">
        <a href="Index.html">&nbsp;</a>
    </li>
    <li class="nav-button" id="whatIs1031">
        <a href="whatIs1031.html">&nbsp;</a>
    </li>
    <!-- ... -->
</ul>

ただし、これはまだ最善の解決策ではないと思います。私はこれに嘘をつくでしょう：

#nav a {
    display: block; 
    padding-left: 15px; /* adjust this value to your image */
    background: url(sprite_a.png) no-repeat;  /* off-image */
}
#nav a:hover{
    background: url(sprite_b.png) no-repeat;  /* on-image */
}

<ul>
  <li><a href="Index.html">Home</a></li>
  <li><a href="whatis1031.html">What is a 1031 exchange?</a></li>
  <li><a href="exchangeRequ.html">1031 Exchange Requirements</a></li>
  <!-- ... -->
</ul>
于 2013-01-09T22:37:46.990 に答える
1

まず、リンクには CSS スタイルとコンテンツがないため、サイズがありません。リスト要素のみにサイズがあります。リンクにスタイルを適用するには、次のようにします。

<li class="nav-button"><a id="fee" href="fees.html"></a></li>

画像が何も表示されないという問題に対して、それは私にとってはまったく問題ありません。css で間違って参照されている最後の項目を除いて:

#h-contactUs

次のようにする必要があります。

#contactUs;
于 2013-01-09T22:52:05.773 に答える
0 
<ul id="nav">

    <li class="nav-button"> <a href="Index.html">Index</a></li>
    <li class="nav-button"> <a href="whatIs1031.html">whatIs1031</a></li>
    <li class="nav-button"> <a href="exchangeRequ.html">exchange1031</a></li>
    <li class="nav-button"> <a href="typesOfExchange.html">typesOfExchange</a></li>
    <li class="nav-button"> <a href="howToStart.html">howToStart</a></li>
    <li class="nav-button"> <a href="whyCLX.html">whyCLX</a></li>
    <li class="nav-button"> <a href="resources.html">resources</a></li>
    <li class="nav-button"> <a href="fAQs.html">faq</a></li>
    <li class="nav-button"> <a href="fees.html">fee</a></li>
    <li class="nav-button"> <a href="contactUs.html">contactUs</a></li>

</ul>

これにより、カーソルを合わせてクリックすると、指定したボタンがリンクされている「href」リンクに移動できます。

于 2016-08-11T11:26:03.337 に答える