Question

我正在进行一个有3个阶段（正常，悬停，活动）的图像按钮翻转。我有正常和悬停阶段工作，但我似乎无法使'活跃'工作。也就是说，我希望图像在点击后保持在主动控制杆上。

谢谢！：））

Answer 1

您要做的是需要JavaScript。您的CSS很好，但是当链接不再有效时，:active选择器不再适用，并且您无法做到这一点。

您可以（例如）使用JavaScript通过向标记添加额外的CSS类来响应click事件，并使用该类将链接设置为与:active链接相同的样式。例如，如果您的JS添加了“clicked”类，则您的规则可能看起来像

#emailUs:active, #emailUs.clicked
{
  background-position: 0 -62px;
}

许多（大多数？）开发人员可能会使用jQuery来做这样的事情。

Answer 2

：active伪类仅在元素处于激活过程中时才适用。释放鼠标后，该元素不再属于：active类别。

为了产生您预期的行为，您需要使用一些Javascript。

Answer 3

在点击事件

上使用jQuery addClass

Answer 4

如果你可以使用JavaScript，这很简单。提出一些类名（例如active），并将其添加到您的:active声明中：

#emailUs:active, .active
{
    background-position: 0 -62px;
}

然后使用JavaScript在该链接上侦听click事件，阻止默认操作，并根据需要在元素中添加/删除active类。

但是，如果JavaScript 不允许，那么获得您想要的内容会更加混乱，这在现场网站上可能是不可行的。

更改链接href，使其指向自身：

<a id="emailUs" href="#emailUs" title="Email Us"></a>

然后在CSS中使用:target选择器：

#emailUs:active, #emailUs:target
{
    background-position: 0 -62px;
}

请记住，第二种解决方案有一些注意事项：