Question

我正在建立一个网站，我在CSS中定义图标，然后在HTML中使用简单的类，例如，这是用于仪表板：

.icon {padding-left: 22px;line-height: 16px;}

.icon-dashboard {background: url("/img/icons/dashboard_off.png") no-repeat}
.icon-dashboard:hover, .icon-dashboard:active {background: url("/img/icons/dashboard_on.png") no-repeat}

然后我可以使用它：

<a class="icon icon-dashboard" href="index.html">Dashboard</a>

现在我有一个带有图标的anchor，当我悬停时会显示颜色（off = b＆amp; w，on = color）。没关系，默认情况下我的所有菜单都处于关闭状态，并且悬停在状态时。

问题：此图标用于在单击时显示子菜单，默认情况下，该子菜单是隐藏的。当我点击anchor并.icon时，会显示下一个<div />。没关系，但是当我向这个<div />移动时，锚点当然处于关闭状态。

我需要添加一个类或其他东西，它在{on}状态下保留anchor的图标，但我想知道是否可以在不重写类icon-dashboard-active的情况下执行此操作。其中一个主要原因是因为我想在javascript中添加一个自动转换为“on”状态的类。

我希望能更好地解释一下。

提前谢谢！

Answer 1

CSS

.icon {
    padding-left: 22px;
    line-height: 16px;
}

.icon.dashboard{
    background-image: url("/img/icons/dashboard_off.png"); 
    background-repeat: no-repeat;
}
.icon.dashboard:hover, 
.icon.dashboard:active,
.icon.dashboard.active{
    background-image: url("/img/icons/dashboard_on.png")
}

HTML

<a class="icon dashboard" href="index.html">Dashboard</a>

这就是你如何做一个好的继承CSS样式。

如果您将类active添加到锚点，它将保持强制“开启”状态，直到您删除该类。

Here is a demo

用于CSS的良好图标使用的活动/非活动类

1 个答案: