Melhor maneira de estilo stackoverflow código 'perguntas' / capotamento botões 'tags'

Question

Qual é a melhor maneira de implementar 'botões' rollover como Stackoverflow tem para 'Perguntas', 'Tags', 'Usuários' no topo.

Na verdade, é implementado como esta:

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

Eu meio que desistiu de tentar encontrar o javascript para isso desde toda a javsascript parece estar em uma linha.

Eu estava pensando que as pessoas pensam é o mais maneira mais simples / confiável para implementar botões simples como isto.

Eu achei muito interessante que stackoverflow está usando <li> e não algo como <span>. Curioso para saber por ...

PS. Estou usando ASP.NET -. Actualmente sem outras bibliotecas como JQuery, mas dispostos a tentar algo assim, se ele vai ajudar

Answer 1

Não há nenhuma javascript necessário para efeitos de foco em links. Basta usar a: hover pseudo-classe :

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

Em relação ao menu, é bastante comum para implementar navegação usando listas não ordenadas .

Answer 2

usando li elementos faz sentido, porque estas são listas (de links), dando a semântica ligações. Quando as coisas estão semanticamente marcado, o documento pode ser entendido por navegadores não-visuais, tais como motores de busca e pessoas visualmente-impared utilizando leitores de tela.

Answer 3

decompondo-o, o seu css conduzido:

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

Firebug é meu amigo.

No entanto, não há nenhuma razão por que ele não ser feito com javascript

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

Answer 4

CSS apenas:

a.tagLink {
    background-color: red;
}

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

Answer 5

Você não precisa usar JavaScript para isso; algumas simples CSS será suficiente:

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

Observe a parte ":hover" do seletor; essa é a parte mágica, e ele funciona em elementos não <a>, também, embora algumas versões mais antigas do IE irá ignorá-lo para outra coisa senão uma ligação.

Obviamente, você pode combinar bits adicionais no seletor para limitar esse efeito aos seus links de navegação, ou o que você deseja alcançar.