我有 3 个导航图标，当一个导航图标悬停在它上面时，它应该在它后面显示一个实心圆圈

【问题标题】：I have 3 nav icons, when one is hovered over it should display a solid circle behind it我有 3 个导航图标，当一个导航图标悬停在它上面时，它应该在它后面显示一个实心圆圈
【发布时间】：2013-01-06 16:32:48
【问题描述】：

导航链接/图标：http://d.pr/i/tawN

当我将鼠标悬停在它们上面时，它应该是这样的：http://d.pr/i/VKI7

最后，我希望当前页面的图标也是不同的颜色（class="current"）

我尝试使用边界半径来执行此操作，但并不顺利。需要JS吗？

谢谢！

【问题讨论】：

您使用的哪个浏览器没有流畅地显示您的边界半径解决方案？这个在 Chrome 和 Firefox 中适用于我：jsfiddle.net/LGt9H

标签： css navigation hover

【解决方案1】：

在所有支持border-radius属性的浏览器中，使用边框半径应该会产生一个相当平滑的圆：http://jsfiddle.net/Mveqj/

div {
    width:100px;
    height:100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    background: #000;
}

要让您的图标在具有活动类别时具有不同的颜色，您需要将当前图标换成另一个颜色正确的图标。

我建议为此使用精灵，这样您只需在启用“活动”类时调整图像的背景位置。

更多关于烈酒的信息：http://www.w3schools.com/css/css_image_sprites.asp

【讨论】：

可能在你的 CSS 中使用伪 :after