编写 stackoverflow 风格“问题”的最佳方法； /‘标签’ 翻转按钮

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

而不是像 这样的东西。 很好奇为什么......

PS。 我正在使用 ASP.NET——目前没有其他库，例如 JQuery，但如果有帮助的话我愿意尝试类似的东西。

Answer 1

链接上的悬停效果不需要 JavaScript。 使用 :hover pseudo-class：

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

只需 菜单中，使用无序列表导航是很常见的。

Answer 2

使用 li 元素是有意义的，因为这些是（链接）列表，赋予链接语义。 当事物被语义标记时，非视觉浏览器可以理解文档，例如搜索引擎和使用屏幕阅读器的视力障碍者。

Answer 3

分解它，它的 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 4

仅CSS：

a.tagLink {
    background-color: red;
}

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

Answer 5

您不需要为此使用 JavaScript； 一些简单的 CSS 就足够了：

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

注意选择器的“:hover”部分； 这就是神奇之处，它也适用于非 元素，尽管某些旧版本的 IE 会忽略链接以外的任何内容。

显然，您可以在选择器中组合其他位，以将这种效果限制在导航链接或您想要实现的任何效果上。