CSS で要素を表示または非表示にする方法

Web 開発では、メニューやプロンプト ボックスなどの要素を表示または非表示にすることが必要になることがよくあります。 JavaScript でこの機能を実現できますが、多くのスクリプトを導入したくない場合や、ブラウザーの互換性を制限したくない場合があります。 CSS のクリックして表示・非表示のテクニックを使用すると、JavaScript を使用せずに CSS を使用して要素を非表示にしたり表示したりすることができます。

CSS のクリックして表示・非表示テクニックを使用するにはどうすればよいですか?

最初に、非表示にする要素を表示に設定します: none; 例:

  <div id="myDiv" style="display: none;">
    这是被隐藏的元素。
  </div>

次に、ボタンやリンクなどのトリガーを追加して、ユーザーがクリックしたときに、隠し要素が表示されます。この効果を実現するには、CSS で :checked 擬似クラスと ~ 兄弟セレクターを使用する必要があります。

  <input type="checkbox" id="toggle" />
  <label for="toggle">点我显示</label>

  <div id="myDiv">
    这是被隐藏的元素。
  </div>

  <style>
    #toggle {
      display: none;
    }

    #toggle:checked ~ #myDiv {
      display: block;
    }
  </style>

この例では、チェックボックス要素をトリガーとして使用します。このチェックボックスをチェックすると、非表示の要素が表示されます。この効果は、CSS の :checked 擬似クラスと ~ 兄弟セレクターを通じて実現されます。チェックボックスを選択すると、その兄弟要素 #myDiv が表示されます。

リンクまたはボタンをトリガーとして使用する場合は、次のコードを使用できます:

  <a href="#myDiv" id="toggle">点我显示</a>

  <div id="myDiv">
    这是被隐藏的元素。
  </div>

  <style>
    #myDiv {
      display: none;
    }

    #toggle:focus ~ #myDiv {
      display: block;
    }
  </style>

この例では、リンク要素をトリガーとして使用します。リンクがフォーカスを受け取ると、非表示の要素が表示されます。この効果は、CSS の :focus 疑似クラスと ~ 兄弟セレクターを通じて実現されます。リンクがフォーカスを受け取ると、その兄弟要素 #myDiv が表示されます。

プレーン テキスト コンテンツを含むラベル要素をトリガーとして使用することもできます。これらをラベル要素で囲み、表示する要素の ID を for 属性に指定するだけです。

概要

CSS クリックして表示非表示テクニックは、JavaScript を使用せずに CSS を使用して要素を非表示にしたり表示したりするために使用できる便利な方法です。 :checked 擬似クラスと ~ 兄弟セレクター、または :focus 擬似クラスと ~ 兄弟セレクターを使用すると、クリックして非表示にする機能を任意の要素に簡単に追加できます。

以上がCSS で要素を表示または非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。