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使用<li>而不是像<span>那样非常有趣。好奇为什么......

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

Answer 1

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

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

关于菜单，实施navigation using unordered lists非常普遍。

Answer 2

使用 li 元素是有意义的，因为这些是链接列表，给出了链接语义。当事物被语义标记时，文档可以被非可视浏览器理解，例如搜索引擎和使用屏幕阅读器的视觉上受影响的人。

Answer 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");
           }); 
      });
});

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”部分;这是神奇的一点，它也适用于非<a>元素，虽然一些旧版本的IE会忽略它而不是链接。

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

编写stackoverflow样式'问题'/'标签'翻转按钮的最佳方法

5 个答案: