通过点击/点击事件禁用 CSS3 延迟转换

Question

我有一个网页，其中的链接如下所示：

<a href="..." class="icon home"><span>Home</span></a>

我的链接仅显示为一个图标（使用伪元素），但是当一个人将鼠标悬停在它上面并等待一段时间时，文本也会出现在它旁边。我使用 transition 延迟状态更改纯粹在 CSS3 中创建了这些状态。

a span {
    text-indent: -1000em;
}

a:hover span {
    text-indent: 0;
    transition: text-indent 0 3s;
}

Here's a working example 在 JSFiddle 上。

但我想解决一些怪癖，如果可能的话，我会特别乐意在没有 Javascript 的情况下做到这一点：

1. 当使用鼠标时，我不想在用户已经点击操作链接时显示span（在页面上做某事而不重定向到其他地方），因为当用户点击链接时，他们可能仍然停留在它上面鼠标光标因此延迟悬停状态仍然执行。

2. 在移动设备上点击相同的链接时，我想取消悬停，这样只会记录点击。

基本上通过解决#2，当解决方案不是特定于设备时，我也会解决#1。

Answer 1

我不确定它是否有效，但您可以使用 a:active 和 a:visited 隐藏跨度

a:active span{
    display: none;
}

a:visited span{
    display: none;
}

Example