编写stackoverflow样式“问题”/“标签”翻转按钮的最佳方法答案

【问题标题】：Best way to code stackoverflow style 'questions' / 'tags' rollover buttons编写stackoverflow样式“问题”/“标签”翻转按钮的最佳方法
【发布时间】：2010-10-01 00:58:34
【问题描述】：

实现翻转“按钮”的最佳方法是什么，例如 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 使用 <li> 而不是 <span> 这样的东西非常有趣。很好奇为什么...

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

【问题讨论】：

这是一个链接列表。为什么不会你使用“列表项”标签呢？ <span> 给你什么意义？

标签： html css text button rollover

【解决方案1】：

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

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

关于菜单，实现navigation using unordered lists是很常见的。

【讨论】：

请注意，您必须将链接的行高设置为您不需要的按钮的高度。您还可以在其他元素（如 li 的）上使用此伪类，但在 IE6 中不起作用。还要确保在使用此方法将您的 a 上的伪类定义为：LOve HaTe
是的，用于导航的 LI 对可用的 HTML 标记最有意义。这篇 2002 年关于 A List Apart 的文章对您今天看到的标记约定产生了广泛的影响：“...我发现 Web 上的大多数页面都包含导航区域中的链接菜单。这些通常被标记为字符串链接，通常在单独的 DIV 或段落中。然而，在结构上，它们是链接列表，应该这样标记。 - alistapart.com/articles/taminglists

【解决方案2】：

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

【讨论】：

【解决方案3】：

分解它，它的 css 驱动：

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

萤火虫是我的朋友。

但是，没有理由不能用 javascript 完成

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

【讨论】：

【解决方案4】：

仅 CSS：

a.tagLink {
    background-color: red;
}

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

【讨论】：

【解决方案5】：

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

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

注意选择器的“:hover”部分；这就是神奇之处，它也适用于非<a> 元素，尽管一些旧版本的 IE 会忽略它而不是链接。

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

【讨论】：