html - poner - La mejor manera de codificar los botones de rollover ''preguntas''/''etiquetas'' del estilo stackoverflow

que es tags h1 y cursiva

Question

Cuál es la mejor manera de implementar ''botones'' de renovación como Stackoverflow para ''Preguntas'', ''Etiquetas'', ''Usuarios'' en la parte superior.

En realidad se implementa así:

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

Dejé de intentar encontrar el javascript para esto, ya que todo el javsascript parece estar en una línea.

Me preguntaba qué piensan las personas que es la forma más simple / más confiable de implementar botones simples como este.

Me pareció muy interesante que stackoverflow esté usando <li> y no algo así como <span> . Curioso de por qué ...

PD. Estoy usando ASP.NET, actualmente sin otras bibliotecas como JQuery, pero dispuesto a probar algo así si me sirve.

Answer 1

CSS solo:

a.tagLink {
    background-color: red;
}

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

Answer 2

Descomponiéndolo, su css conducido:

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

Firebug es mi amigo.

Sin embargo, no hay ninguna razón por la cual no podría hacerse con javascript

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

Answer 3

El uso de elementos li tiene sentido porque son listas (de enlaces), lo que da semántica a los enlaces. Cuando las cosas se marcan semánticamente, los navegadores no visuales pueden entender el documento, como los buscadores y las personas con problemas de visión que utilizan lectores de pantalla.

Answer 4

No necesita usar JavaScript para esto; algunos CSS simples serán suficientes:

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

Tenga en cuenta la parte " :hover " del selector; esa es la parte mágica, y también funciona con elementos que no son <a> , aunque algunas versiones anteriores de IE lo ignorarán por algo que no sea un enlace.

Obviamente, puede combinar bits adicionales en el selector para limitar este efecto a sus enlaces de navegación, o lo que quiera lograr.

Answer 5

No se necesita javascript para los efectos de desplazamiento en los enlaces. Simplemente usa la: pseudo-clase de hover:

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

En cuanto al menú, es bastante común implementar navegación utilizando listas desordenadas .