禁用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