css移動端實現與pc端一樣的:acitve效果

轉載自：http://www.jb51.net/css/229841.html

做移動前端也有一些日子了，一直有個問題沒有解決，就是與pc端那樣的一個:hover的效果，:hover是鼠標指針浮動在其上的元素的一個選擇器，但因爲在移動端是沒有鼠標的，代替的是觸摸屏，用戶也不是有“鼠標指針浮動在其上的元素”的情況，有也很少。 所以取代的應該:active這個選擇器，但是通過實踐，發現情況不是很理想，在QQ瀏覽器上有時觸發，有沒不觸發，在我mx3帶自瀏覽器上根本沒效果。 

最近在看美團h5的頁面時發現他們做對這個效果做得很好（這裏說實話，美團網在h5這一塊做得真好），看了他們代碼之後，發現他們也是用:active來實現這個效果，但他們多了一行js代碼， 

複製代碼

代碼如下:

document.body.addEventListener('touchstart', function () { }); 

其實這行代碼帶沒有做什麼事，只是對body綁定了一個touchstart事件，然後也沒做什麼事。 

自已實踐了一下發現可以了，效果真心不錯。贊一下美團。 

ps:在移動端中瀏覽器會有自帶的一個點擊高亮效果，可以通過給a標籤或者body,html加 

複製代碼

代碼如下:

-webkit-tap-highlight-color:transparent;

都行。