CSS のみを使用してホバー時に非表示の DIV を表示するにはどうすればよいですか?

ホバー時に非表示の DIV を表示するための CSS のみのソリューション

提示された課題には、最初は非表示になっていた 3 つの DIV が含まれるメニューが含まれます。これらの DIV は、次の条件に基づいて表示されるようになります。 CSS のみを使用したユーザーのメニュー選択。これは、JavaScript が無効になっている場合でもアクセシビリティを確保するためです。

CSS のみのアプローチ

JavaScript を使用せずにこれを実現するには、「チェックボックス ハック」が役立ちます。このメソッドは、:checked 擬似セレクターを使用して、チェックまたはチェックされていない状態に基づいてスタイルが割り当てられたチェックボックス入力要素を利用します。チェックボックスはラベルに関連付けることで非表示にできます。

コード例

次のコード例を考えてみましょう:

<input type="checkbox">

input[type="checkbox"]:checked + div {
  display: block;
}

この例では、オプション 1 のチェックボックスをオンにすると、「content-1」DIV が表示されます。同様に、オプション 2 のチェックボックスをオンにすると、「content-2」DIV が表示されます。

追加の説明

スライド/フェード効果に関するクライアントのリクエストに関しては、これがJavaScriptで実現可能です。ただし、CSS のみのソリューションの場合、これは実現できません。あるいは、CSS トランジションを使用して微妙なフェードイン効果を作成することを検討することもできます。

以上がCSS のみを使用してホバー時に非表示の DIV を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。