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

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

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