CSS は Web ページで非常に重要な役割を果たします。近年の CSS の発展に伴い、疑似要素/疑似クラスも広く使用されるようになりました。パフォーマンスがますます重要になる中、ドキュメント フローの外側にある CSS 疑似要素/疑似クラスは、まさに「無冠の王」です。 ここでは、著者がまとめた CSS に関する「セクシーな操作」をいくつか紹介します。皆さんのお役に立てば幸いです。 :hover と :focus はフローティングレイヤーを表示します CSS 親子セレクター (「親子ネスト」用)/兄弟セレクター (「同一レベルの並列配置」用) + 疑似クラス <a href="javascript:;">画像リンク</a> <img src="xxx" alt="" /> 画像{ 可視性: 非表示; 位置: 絶対; transition: visibility .2s; /** 遅延を設定する **/ } a:ホバー+画像、 画像:ホバー{ 可視性: 可視; } 最後に、画像がリンク表示を覆ってしまうのを防ぐために、マウスを画像の上に移動しても画像が表示され続けるように しかし、マウス環境がない場合、これは「失敗」します。例: モバイル端末やスマートデバイス。エクスペリエンスを最適化するために、img に疑似クラス a:フォーカス + 画像、 フォーカス 可視性: 可視; 遷移: なし; } :フォーカス:ホバー 実際には、ドロップダウン リストにあります。 CSS だけを使用している場合は、「親子関係のない並列要素」の使用はお勧めしません。問題はフォーカスにあります: <div class="y-table"> <a href="javascript:;" class="y-msg">私のメッセージ</a> <div class="cs-list"> <a href="javascript:;">私の回答</a> <a href="javascript:;">私のプライベートメッセージ</a> <a href="javascript:;">私の注文</a> <a href="javascript:;">私のフォロー</a> <a href="javascript:;">お気に入り</a> </div> </div> :フォーカス内 :not() は表示要素を決定します Webページ上の[検索]ボタンでは、入力したキーワードに基づいてリストが表示されるシナリオがあります。著者はかつて、シナリオを説明するために JavaScript を使用した記事を書きました: (JavaScript) Baidu/Google 検索のインスタント自動補完機能はどのように「機能」するのでしょうか? 実際、CSS .list:not([class="show"]) { 表示: なし; } CSS3 セレクターには、属性セレクターと呼ばれるものがあり、次のような使い方をします: 次に、フィルタリング時に、条件を満たしているかどうかに基づいて、返されたリストの一部の項目に表示クラス名を動的に追加します。 「カスタム データ属性」を使用することもできます。 :ない ボタンをクリックすると菊の写真が表示されます 一般的な使用シナリオについてお話ししましょう。フォームで送信ボタンをクリックしたときに、ユーザーが「より多くのフィードバック効果」を見ることができれば、Web ページの人気が高まると思われます。したがって、「フォームを送信」するときに、ユーザーに待機中であることを知らせるのが良いようです。 JavaScript を通じてクラス名を制御し、クリック時にボタンに loading-name を追加し、テキストを透明にして、背景を読み込み中の画像に設定します。 「クリック」を見たら、「疑似クラス: focus」や「疑似クラス: active」をちょっと考えて、書き直してみてほしいと思います。 :active は「データレポート」を実装します 実際、Web ページには小さな問題があります。ユーザーが JavaScript を無効にした場合、またはブラウザーが JavaScript をサポートしていない場合はどうなるでしょうか?もちろん、後者の状況は現在では基本的に発生していませんが、これは確かに厄介な問題であり、多くのフロントエンド開発者がそれに取り組んでいます。 この問題は、著者の他の記事でも言及されています。ここでは、「データ レポート」についてのみ説明します。フォームがなく、JavaScript がサポートされていない場合 (ajax を使用できない場合)、データをバックエンドに渡すにはどうすればよいでしょうか。幸いなことに、クリック状態を表す疑似クラス 通常、active と after を一緒に使用します。 信じられないかもしれませんが、サーバーにリクエストを送信してデータをアップロードします。 ここで URL を使用するのはなぜですか?画像形式を使用しない場合は、after-contentの文字列形式で固定値のみ書き込むことができます。 ::after と ::before のシナリオ 疑似要素/疑似クラスの「リーダー」として、どうして「後」と「前」について話さずにはいられないのでしょうか?これらは非常に多くのシナリオで使用されます。一般的な「単語間の '|' 記号」、「単語の前後の水平線」、「いくつかの特殊なパターン、さらには組み合わせたパターン」などで見られます。 「検索アイコン」スタイルの実装 純粋な CSS で実装されたクールな「読み込み」 CSS 疑似要素と疑似クラスの素晴らしい使い方を紹介したこの記事はこれで終わりです。CSS 疑似要素と疑似クラスに関するより詳しい情報は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: JS の FileReader を介して .txt ファイルの内容を取得する方法
目次1. Gojsの実装1. 描画2. 破線の実装3. 点線を動かす2. 点線と点線アニメーションの...
コードをコピーコードは次のとおりです。 <object classid="clsid...
tinyMCE の使用方法の詳細な説明初期化TinyMCE を初期化するときは、ページの HEAD ...
span タグは HTML ウェブページを作成するときによく使用されますが、このタグの使い方がよくわ...
1. インストールディレクトリにzipパッケージを解凍します。まず、mysql-8.0.11-win...
1. yumソースを更新するCentOS7 のデフォルトの yum リポジトリの PostgreSQ...
この記事では、MySQL 5.6.23のインストールと設定のチュートリアルを参考までに紹介します。具...
目次序文レンダリングsetTable コンポーネント使用結論序文フォームを使用して PC 側のプロジ...
目次1. IDEAはdockerプラグインをダウンロードします2. クラウドサーバーDocker 2...
シナリオ: 検査文書には n 個の検査詳細があり、検査詳細には n 個の検査項目があります。実装効果...
目次序文1. ローカルポート転送2. リモートポート転送3. 動的ポート転送(SOCKS5) 4. ...
DOCTYPE 宣言 作成するすべてのページの先頭に、ドキュメント宣言が必要です。はい、そうでしょう...
注: システムは Ubuntu 14.04LTS、32 ビット オペレーティング システムです。Py...
プライベート Docker レジストリのインストールとデプロイは、Docker テクノロジーを導入、...
目次すべてのストレージエンジンを表示InnoDB ストレージ エンジンMyISAM ストレージエンジ...