0

関連するアイコンをメイン ナビゲーションの上に配置しようとしています。基本的に、私が達成しようとしているのは、ユーザーが適切な領域 (大きなパディングのあるタグ) にカーソルを合わせたときに、テキストとアイコンを別の色に変更することです。私はそれを達成するのに問題があります。

私の考えでは、アイコン フォントを使用するのが最も簡単だと思いますが、それらはインラインのみです。次に、アイコンフォントを使用して新しいものを作成し、それらをman navの上に配置しようとしましたが、ユーザーが指定された領域にカーソルを合わせたときに色を変更する方法がわかりませんでした.

タグでクラスを作成し、ディスプレイをブロックに変更すると、ナビがオフになったため、機能しませんでした。私のコード:

 <ul id="nav" role="navigation">
   <li><a href="#">EXCERPT</a></li>
   <li><a href="#">ABOUT</a></li>
   <li><a href="#">CONTACT</a></li>
</ul>

#header {
   overflow: hidden;
   background-color: #F5F5F5;
   border-bottom: 2px black solid;
   position: relative;
}

#nav {
   float: right;
   position: absolute;
   bottom: 0;
   right: 0;
   margin: 0 0 10px 0;
}

#nav li {
   list-style: none;
   display: inline;
   font-size: 2.5em;
   letter-spacing: 0.1em;
   font-family: 'OstrichSansMedium';
}

#nav a {
   text-decoration: none;
   color: #C4C4C4;
   padding: 200px 20px 15px;
}

#nav a:hover {
   color: #000000;
   background-color: green;
}
4

1 に答える 1

0

私はあなたのためにフィドルをやろうとしていましたが、jsfiddle はメンテナンスのためにダウンしています。画像などを含む複雑なバーを処理するには、少しスクリプトを使用する必要があります。スプライトは非常に便利で効果的ですが、それをサポートするには少なくとも数行のスクリプトが必要です。

jQueryUIのタブのソースを見てください。上記の構造は、タブ バーにすぎません。

こちらのサイトもご覧ください。実際の例トップ ナビゲーションはすべて、画像、CSS、およびほんの少しの jQuery で構成されています。これもソースを取得して、いつでも表示できるようにします。

于 2013-02-23T02:56:39.670 に答える