最近我读了一篇文章，这篇文章使我重新考虑了我不断在用的制造“You Are Here”按钮的方法。结果是我如今有两个可行的方法可供选择，在给定的情况下我可以选择使用其中比较容易的那个方法来实现这种按钮。下面让我们来对比一下这两种方法，看看你应该在什么时候使用哪种方法。

背景：我们想要做什么

“You Are Here”按钮是我使用的一个术语，表示一个指向当前页面的按钮或者链接，并且这个按钮或链接表现为不同的款式以协助访问者确定他们目前在 Web 站点中所处的位置。“You Are Here”普通是导航栏中的一个按钮，但是也有可能是“breadcrumb trail”中的一个链接，或者任何指向当前页面的链接。

“You Are Here”按钮普通具有不同的外观款式，以使其区别于导航栏中的其它按钮。例如，在“You Are Here”按钮上，你可以使用与导航栏中其它按钮的文本及背景颜色相反的颜色，或者使用比其它按钮的暗影更淡的暗影。

为了避免迷惑站点访问者，“You Are Here”按钮应该不能表现为可点击的链接，由于它并不会把访问者带到另外一个页面中。换句话说，“You Are Here”不应该有滚翻效果，并且在把光标放到“You Are Here”按钮上时光标不应该变成小手的外形。

方法一：忽略链接

可能最简单的实现“You Are Here”按钮的方法是赋给包含“You Are Here”按钮文本的 ＜div＞ 或 ＜li＞ 一个 class 或 ID，然后创建一个款式将适当的格式使用到那个 class 或 ID 上。由 class 或 ID 担任“You Are Here”控制按钮的外观。为了保证“You Are Here”不是可点击的链接，可以移除为那个按钮定义链接的 ＜a＞ 标签。

例如，下面是一个我几个月前所写的“You Are Here”按钮示例的标记（markup）。图A给出了代码的实际运转效果。

＜div id="menu"＞
    ＜ul＞
        ＜li＞＜a href="Link1-T1.html"＞Button 1＜/a＞＜/li＞
        ＜li class="youarehere"＞Button 2＜/li＞
        ＜li＞＜a href="Link3-T1.html"＞Button 3＜/a＞＜/li＞
    ＜/ul＞
＜/div＞

下面是使前面的代码能够产生期望的效果所用的 CSS 代码。

div#menu {
    height: auto;
    width: 150px;
    color: #FFFFFF;
}
#menu li {
    height: 40px;
    width: 125px;
    margin: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    text-align: center;
    line-height: 250%;
    list-style-type: none;
    background-color: #003399;
    border: 1px solid #000000;
}
#menu li a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
#menu li a:link, #menu li a:visited {
    font-weight: normal;
    color: #FFFFFF;
}
#menu li a:hover {
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: underline;
}
#menu li.youarehere {
    color: #000099;
    background-color: #66CCFF;
}

留意，.youarehere类（class）被使用到标记中的 ＜li＞ 标签，而且“You Are Here”按钮（button 2）没有包含定义超链接的 ＜a＞ 标签。结果是虽然它具有按钮的外形，但是却不是一个可点击的链接。相反，它只是当前页面中导航按钮栏中的一个摆设。

CSS 代码中的#menu li.youarehere款式定义“You Are Here”按钮的文本及背景颜色。按钮尺寸、边框以及其它格式都来自于 #menu li款式。

对于基于无序列表的导航栏，以及具有标签而又不是 ＜a＞ 标签的类似情况，这种方法效果相当好。

方法二：控制链接（以及光标）的款式

有时候更改标记以及从“You Are Here”按钮中移除 ＜a＞ 标签并不是很方便。例如，导航按钮的标签可能是动态生成的；或者可能是包含在服务器端的 include 文件中的，而并没有直接包含在它将要呈现给浏览器的页面中。在这种情况下，从一个按钮中移除 ＜a＞ 标签以及控制其 ＜li＞ 的款式就显得不大实际。相应的，你需求通过控制选定按钮的 ＜a＞ 标签的款式来创建“You Are Here”效果。

普通情况下，这种效果是可以通过为每个按钮分配一个独一的 ID，然后使用基于 ID 的选择器（selector）控制当前页面的“You Are Here”按钮的款式来实现。定义“You Are Here”按钮的款式可以嵌在文档头中，也可以存储在页面指定的款式级联表中，以使它只对一个页面无效。

如果“You Are Here”按钮的标记包含一个超链接并且导航栏中的其它按钮包含滚翻效果，那么你就需求为“You Are Here”按钮的每个链接形状定义相应的款式。否则的话，“You Are Here”按钮也会出现滚翻效果。实现这一要求的最简单的方法是为所有的链接形状创建一个带有选择器的款式，再创建一组规则声明集合。

即便在创建一组控制“You Are Here”按钮外观的款式之后，还会有很明显的信息显示出它仍然是一个活动的超链接——当访问者当光标指向这个按钮时，光标会变成小手的外形。Mike Rundle 的一篇文章“Hoverless Current Links（不可悬停的光前链接）”提示我经常被忽视的一个 CSS 属性