你将如何实现这样的导航？ [关闭]答案

【问题标题】：How would you implement a navigation like this? [closed]你将如何实现这样的导航？ [关闭]
【发布时间】：2012-04-19 00:57:10
【问题描述】：

您将如何实现这样的导航？

我有点卡住了，想知道是否有人可以指出我实现这一目标的好方法。

这是悬停状态之一的透明 PNG。

【问题讨论】：

由于没有其他人发表评论：请查看关闭原因，以及它链接的常见问题解答。这个网站上的问题确实需要您付出一些努力。无论你尝试了什么，你都应该展示你目前拥有的代码，然后就你在实现设计时面临的挑战提出具体的问题。祝你好运！

标签： javascript html css navigation

【解决方案1】：

您的基本链接组是<ul>

<ul id="links">
    <li class="current"> <!--apply class "current" for current link-->
        <a>link1</a>
    </li> 
    <li>
        <a>link2</a>
    </li>
</ul>

对<a> 标签稍作修改以获得更好的用户体验

#links a {
   display:block;     /*to make `<a>` not inline*/
   padding:           /*make the link hover/click area bigger*/
   text-align: right; /*the right-aligned text*/
}

现在对于 css，将“方形指示器”应用到 <a> ~~背景到“当前”<li>。你也可以这样做~~（对于旧版浏览器，悬停不适用于非<a> 元素）

li.current a{
    background-image:url(url_to_square_indicator);
    background-position: middle right; 
    /*
      you can use position to refine it's position.
      im not so sure about this if this "middle right" 
      is still applicable these days
    */
}

如果您将鼠标悬停在当前链接上，请使用:hover 将您的图像换成发光的。您不需要重新声明以前应用的样式，它们只是延续。你只是换出图像。（在这种情况下，背景位置仍然适用）

li.current a:hover{
    background-image:url(url_to_glowing_indicator);
}

【讨论】：

并且不要忘记将链接文本嵌套在一个额外的<a> 标记中，其中正确的href 属性指向子页面。

【解决方案2】：

如果我不得不猜测，我会说 :hover 会改变背景，因为它是一个图像文件。还要确保设置背景位置和重复，以便它只出现在那里。

【讨论】：