Meilleure façon de coder les boutons rolloverflow style 'questions'/'tags'

Question

Quel est le meilleur moyen d'implémenter des boutons de survol comme Stackoverflow a pour 'Questions', 'Tags', 'Utilisateurs' en haut.

Il est effectivement mis en œuvre comme ceci:

<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> 

J'ai un peu à essayer de trouver le javascript pour cela car tout le javsascript semble être sur une seule ligne. Je me demandais juste ce que les gens pensent est la manière la plus simple/la plus fiable d'implémenter des boutons simples comme celui-ci. J'ai trouvé très intéressant que stackoverflow utilise <li> et pas quelque chose comme <span>. Curieux de savoir pourquoi ...

PS. J'utilise ASP.NET - actuellement sans autres bibliothèques comme JQuery, mais je suis prêt à essayer quelque chose comme ça si ça peut aider.

Answer 1

Il n'y a pas de javascript nécessaire pour les effets de survol sur les liens. Il suffit d'utiliser: hover pseudo-class:

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

En ce qui concerne le menu, il est assez fréquent de mettre en œuvre navigation using unordered lists.

Answer 2

CSS seulement:

a.tagLink { 
    background-color: red; 
} 

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

Answer 3

Vous n'avez pas besoin d'utiliser JavaScript pour cela; certains CSS simple, suffit:

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

Notez la partie ":hover" du sélecteur; C'est le bit magique, et il fonctionne aussi sur des éléments non-<a>, bien que certaines versions plus anciennes d'IE ne tiennent pas compte d'autre chose qu'un lien.

De toute évidence, vous pouvez combiner des bits supplémentaires dans le sélecteur pour limiter cet effet à vos liens de navigation, ou ce que vous voulez réaliser.

Answer 4

en utilisant li les éléments ont du sens car ce sont des listes (de liens), donnant les liens sémantiques. Lorsque les objets sont balisés sémantiquement, le document peut être compris par des navigateurs non visuels, tels que des moteurs de recherche et des personnes visuellement imparfaites utilisant des lecteurs d'écran.

Answer 5

décomposant, son css Driven:

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

Firebug est mon ami.

Cependant, il n'y a aucune raison pour laquelle il ne pouvait pas être fait avec javascript

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