cssモバイル端末：acitveeffect_html/css_WEB-ITnoseの実装

私はしばらくモバイル フロントエンドに取り組んできましたが、解決されていない問題がありました。それは、PC バージョンの :hover エフェクトと同様に、 :hover が配置される要素のセレクターです。マウスポインタが浮くが、モバイルのため端末にはマウスがなく、代わりにタッチスクリーンであり、ユーザーは「マウスポインタが浮いている要素」を持っておらず、非常に少ないです。 したがって、セレクターを active に置き換える必要があります。しかし、実際に練習してみると、この状況は QQ ブラウザーでトリガーされることもあれば、まったくトリガーされないこともあります。私のmx3に付属しています。

最近、Meituan の h5 ページを見ていたら、このエフェクトで良い仕事をしていることがわかりました (正直に言うと、コードを見た後、Meituan.com は h5 で本当に良い仕事をしました)。この効果を実現するために、active も使用していることがわかりましたが、js コード

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

が追加されています。実際、このコード行は、touchstart イベントを本体にバインドしているだけです。それから何もしなかった。

私自身も試してみましたが、効果はとても良いことが分かりました。美団を讃えよ。

追記: モバイル側では、ブラウザに

-webkit-tap-highlight-color:transparent;

をタグ、本文、または HTML に追加することができます。