Best way to code stackoverflow style 'questions' / 'tags' rollover buttons

Question

Whats the best way to implement rollover 'buttons' like Stackoverflow has for 'Questions', 'Tags', 'Users' at the top.

It is actually implemented like this :

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

I kinda gave up trying to find the javascript for this since all the javsascript seems to be on one line.

I was just wondering what people think is the simplest / most reliable way to implement simple buttons like this.

I found it very interesting that stackoverflow is using <li> and not something like <span>. Curious as to why...

PS. I'm using ASP.NET -- currently with no other libraries such as JQuery, but willing to try something like that if it'll help.

Answer 1

There's no javascript needed for hover effects on links. Just use the :hover pseudo-class:

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

Regarding the menu, it is quite common to implement navigation using unordered lists.

Answer 2

CSS only:

a.tagLink {
    background-color: red;
}

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

Answer 3

You don't need to use JavaScript for this; some simple CSS will suffice:

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

Note the ":hover" part of the selector; that's the magic bit, and it works on non-<a> elements, too, although some older versions of IE will disregard it for anything other than a link.

Obviously, you can combine additional bits in the selector to limit this effect to your navigation links, or whatever you want to achieve.

Answer 4

using li elements makes sense because these are lists (of links), giving the links semantics. When things are semantically marked up, the document can be understood by non-visual browsers, such as search engines and visualy-impared persons using screen-readers.

Answer 5

Decomposing it, its css driven:

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

Firebug is my friend.

However, there's no reason why it couldn't be done with javascript

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