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

Question

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

当我将鼠标悬停在它们上时，它应该如下所示：http ://d.pr/i/VKI7

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

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

谢谢！

Answer 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