溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“如何實現css移動端與pc端一樣的acitve效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何實現css移動端與pc端一樣的acitve效果”吧!
做移動前端也有一些日子了，一直有個問題沒有解決，就是與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效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
