ホームページ > 記事 > ウェブフロントエンド > モバイル Web サイトで a タグをクリックしたときに点滅する境界線またはマスク レイヤー (CSS) をクリアします_html/css_WEB-ITnose
モバイル Web サイトでは、a タグが付いたテキストまたは画像をクリックすると、WeChat の Web サイトの場合と同様に、要素の周囲に青い枠線が点滅しますが、一部のブラウザーでは半透明のマスクが点滅します。実際、これらの特殊効果は、要素がクリックされたことをユーザーに伝え、ユーザー エクスペリエンスを向上させるためのものです。 . 実際、これは非常に簡単で、CSS を追加するだけです。
タグがクリックされたときに表示される特殊効果をすべてクリアします: a{ -webkit-tap-highlight-color:rgba(255,0,0,0);}
これは Webkit カーネル ブラウザのプライベート属性ですただし、WeChat の Web サイトでも有効です。実際、UC や Safari など、ほとんどのモバイル ブラウザは Webkit コアをベースにしていると考えられます。
念のため言っておきますが、このCSSはaタグがクリックされたときに表示される特殊効果のみをクリアできますが、JSのクリックイベントが要素に追加されたときに表示される特殊効果はクリアできません。同じようにするか、要素に境界線を追加するか、マスクレイヤーを追加します。後者の特殊効果を解除する方法がまだ分かりません。知っている方はメッセージを残していただければ幸いです。