3

什么是实现翻转“按钮”的最佳方式，如 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，但如果有帮助，我愿意尝试类似的东西。

4

5 回答 5

15

链接上的悬停效果不需要 javascript。只需使用 :hover伪类：

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

关于菜单，使用无序列表实现导航是很常见的。

于 2009-01-12T22:50:54.140 回答
3

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

于 2009-01-12T22:56:00.137 回答
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");
           }); 
      });
});
于 2009-01-12T23:10:46.083 回答
1

仅 CSS：

a.tagLink {
    background-color: red;
}

a.tagLink:hover {
    background-color: blue;
}
于 2009-01-12T22:52:15.200 回答
1

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

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

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

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

于 2009-01-12T22:53:19.457 回答