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

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

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

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

代碼如下:

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

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

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

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

代碼如下:

-webkit-tap-highlight-color:transparent;

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

當前名稱：如何實現css移動端與pc端一樣的acitve效果
URL地址：http://m.newbst.com/article22/gohhcc.html

成都網站建設公司_創新互聯，為您提供響應式網站、搜索引擎優化、網站排名、網站設計、品牌網站建設、企業網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯