javascript - 你将如何实现这样的导航？

Question

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

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

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

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

Answer 2

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