css - Bootstrap 药丸 CSS

Question

我正在我的一个工具上开发“进度”指示器，我希望能够通过蓝色药丸(正常颜色)显示哪些步骤已完成，然后未完成的步骤将显示灰色(悬停时)颜色。

基本上我需要能够创建一个药丸并拥有一个 .complete(blue) 或 .incomplete(grey) 的类。它们都不必具有悬停颜色。

目前第一个药丸在此默认列表中处于事件状态，第二个药丸我只是悬停在上面。我希望其他 3 个步骤在具有 .incomplete 类时默认为灰色。

我将如何实现这一目标？

Answer 1

.nav > li.incomplete > a {
    background-color: #eee;
}
.nav > li.complete > a {
    background-color: #428bca;
    color: white;
}

http://jsfiddle.net/isherwood/Yafb5