ホームページ  >  記事  >  ウェブフロントエンド  >  モバイル Web サイトで a タグをクリックしたときに点滅する境界線またはマスク レイヤー (CSS) をクリアします_html/css_WEB-ITnose

モバイル Web サイトで a タグをクリックしたときに点滅する境界線またはマスク レイヤー (CSS) をクリアします_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:47:031343ブラウズ

モバイル Web サイトでは、a タグが付いたテキストまたは画像をクリックすると、WeChat の Web サイトの場合と同様に、要素の周囲に青い枠線が点滅しますが、一部のブラウザーでは半透明のマスクが点滅します。実際、これらの特殊効果は、要素がクリックされたことをユーザーに伝え、ユーザー エクスペリエンスを向上させるためのものです。 . 実際、これは非常に簡単で、CSS を追加するだけです。

タグがクリックされたときに表示される特殊効果をすべてクリアします: a{ -webkit-tap-highlight-color:rgba(255,0,0,0);}

これは Webkit カーネル ブラウザのプライベート属性ですただし、WeChat の Web サイトでも有効です。実際、UC や Safari など、ほとんどのモバイル ブラウザは Webkit コアをベースにしていると考えられます。

念のため言っておきますが、このCSSはaタグがクリックされたときに表示される特殊効果のみをクリアできますが、JSのクリックイベントが要素に追加されたときに表示される特殊効果はクリアできません。同じようにするか、要素に境界線を追加するか、マスクレイヤーを追加します。後者の特殊効果を解除する方法がまだ分かりません。知っている方はメッセージを残していただければ幸いです。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。