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;
}

JSFiddle上的

但是有一些我想解决的怪癖，如果没有Javascript，我会特别高兴这样做：

使用鼠标时，我想在用户点击操作链接时不显示span（在页面上执行某些操作而不在其他位置重定向），因为当用户点击链接时，他们可能仍然保留它用鼠标光标，所以延迟悬停状态仍然执行。
在移动设备上点击相同的链接时，我想取消隐藏，因此只会点击。

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

Answer 1

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

a:active span{
    display: none;
}

a:visited span{
    display: none;
}