3

Stackoverflow の上部にある「質問」、「タグ」、「ユーザー」のようなロールオーバー「ボタン」を実装する最良の方法は何ですか。

実際には次のように実装されています。

<div class="nav">            
<ul class="primarynav">
      <li class="">
           <a href="/questions">Questions</a>
      </li>
      <li class="">
           <a href="/tags">Tags</a>
      </li>
      <li class="">
           <a href="/users">Users</a>
      </li>
      <li class="">
          <a href="/badges">Badges</a>
      </li>
      <li class="">
          <a href="/unanswered">Unanswered</a>
      </li>
 </ul>

すべてのjavascriptが1行にあるように見えるので、これのためのjavascriptを見つけようとするのをちょっとあきらめました。

このような単純なボタンを実装するための最も単純で信頼性の高い方法は何だと人々は考えているのだろうと思っていました。

<li>のようなものではなく、stackoverflow が使用していることは非常に興味深いと思いました<span>。なぜか気になる...

PS。私は ASP.NET を使用しています。現在、JQuery などの他のライブラリはありませんが、役立つ場合はそのようなものを試してみたいと思っています。

4

5 に答える 5

15

リンクのホバー効果に JavaScript は必要ありません。:hover疑似クラスを使用するだけです:

a:hover {
    background-color:#FF9900; 
}

メニューに関しては、順序付けられていないリストを使用してナビゲーションを実装することは非常に一般的です。

于 2009-01-12T22:50:54.140 に答える
3

これらは（リンクの）リストであり、リンクのセマンティクスを与えるため、 li要素を使用することは理にかなっています。物事が意味的にマークアップされると、ドキュメントは、検索エンジンやスクリーン リーダーを使用する視覚障害者など、非視覚的なブラウザーでも理解できるようになります。

于 2009-01-12T22:56:00.137 に答える
1

CSS のみ:

a.tagLink {
    background-color: red;
}

a.tagLink:hover {
    background-color: blue;
}
于 2009-01-12T22:52:15.200 に答える
1

これには JavaScript を使用する必要はありません。簡単な CSS で十分です。

a:hover {
    background-color: /* something magical */;
}

:hoverセレクターの " " 部分に注意してください。これは魔法のビットであり、非<a>要素でも機能しますが、古いバージョンの IE では、リンク以外では無視されます。

明らかに、セレクターで追加のビットを組み合わせて、この効果をナビゲーション リンクや達成したいものに制限することができます。

于 2009-01-12T22:53:19.457 に答える