禁用CSS3延迟与点击/点击事件

Question

我有一个Web页面，看起来像链接转换：

<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