Лучший способ кодировать кнопки прокрутки в стиле stackoverflow в стиле 'questions' / 'tags'

Question

Как лучше всего реализовать кнопки «ролловера», такие как 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 для этого, так как весь javsascript, кажется, находится в одной строке.

Мне было просто интересно, что люди думают, что это самый простой / надежный способ реализовать простые кнопки, подобные этой.

Мне показалось очень интересным, что stackoverflow использует <li>, а не что-то вроде <span>. Любопытно, почему ...

PS. Я использую ASP.NET - в настоящее время нет других библиотек, таких как JQuery, но готов попробовать что-то подобное, если это поможет.

Answer 1

Для эффектов наведения ссылок на ссылки не требуется JavaScript. Просто используйте: hover псевдокласс :

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

Что касается меню, довольно часто реализуется навигация с использованием неупорядоченных списков .

Answer 2

Разложив его, его css движет:

.primarynav li {
    margin-right:7px;
}
.primarynav li:hover {
   background-color:#FF9900;
}

Firebug - мой друг.

Однако, нет никаких причин, по которым нельзя сделать с помощью javascript

jQuery(function($){ 
      $("ul#nav li").each(function(i,v){ 
           $(v).hover(function(){ 
              $(v).addClass("hovered"); 
           },function(){ 
              $(v).removeClass("hovered");
           }); 
      });
});

Answer 3

использование li элементов имеет смысл, потому что это списки (ссылок), дающие семантику ссылок. Когда вещи семантически размечены, документ может быть понят невизуальными браузерами, такими как поисковые системы и люди с нарушениями зрения, использующие программы чтения с экрана.

Answer 4

Вам не нужно использовать JavaScript для этого; хватит простого CSS:

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

Обратите внимание на «:hover» часть селектора; это волшебный бит, и он работает также с элементами, не относящимися к <a>, хотя некоторые старые версии IE будут игнорировать его для чего-либо, кроме ссылки.

Очевидно, что вы можете комбинировать дополнительные биты в селекторе, чтобы ограничить этот эффект вашими навигационными ссылками или тем, чего вы хотите достичь.

Answer 5

Только CSS:

a.tagLink {
    background-color: red;
}

a.tagLink:hover {
    background-color: blue;
}