本篇內(nèi)容主要講解“如何實現(xiàn)css移動端與pc端一樣的acitve效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何實現(xiàn)css移動端與pc端一樣的acitve效果”吧!

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于成都做網(wǎng)站、網(wǎng)站設計、徽州網(wǎng)絡推廣、小程序制作、徽州網(wǎng)絡營銷、徽州企業(yè)策劃、徽州品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)公司為所有大學生創(chuàng)業(yè)者提供徽州建站搭建服務，24小時服務熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com

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

最近在看美團h6的頁面時發(fā)現(xiàn)他們做對這個效果做得很好（這里說實話，美團網(wǎng)在h6這一塊做得真好），看了他們代碼之后，發(fā)現(xiàn)他們也是用:active來實現(xiàn)這個效果，但他們多了一行js代碼，

代碼如下:

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

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

自已實踐了一下發(fā)現(xiàn)可以了，效果真心不錯。贊一下美團。

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

代碼如下:

-webkit-tap-highlight-color:transparent;

到此，相信大家對“如何實現(xiàn)css移動端與pc端一樣的acitve效果”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！