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

Question

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

我有点卡住，并想知道，如果有人可以点我朝着一个好办法做到这一点。

下面是其中一个悬停状态的透明PNG。

Answer 1

如果我猜的话，我会说的：悬停改变的背景下，因为它是一个图像文件。另外请确保设置背景位置和重复，以便它只出现在那里。

Answer 2

你的基本链路组是一个<ul>

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

为<a>标签稍加修改为更好的UX

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