ホバーによって要素の表示・非表示を変える方法【cssだけで完結!】

HTML/CSS

こんにちは、なっちる先生(@nacchi_jagariko)です。

現在、フリーランスエンジニアとして活動しています。

作業中こんなことを思ったことはありませんか?

ホバーすると文字列が出てくるようにしたい。。

ホバーすると背景の色が変わるようにしたい。。。

ホバーアクションはかっこよくしたいものです。

ということで、今回は、いろいろと活用できるCSSで完結する、ホバーによって要素の表示・非表示を変える方法について紹介したいと思います。

この記事は以下のような人向けです。

ホバーによって要素の表示・非表示を切り替えて、ホバーアクションをかっこよくしたい。。

では、参りましょう〜。

スポンサーリンク

 例:こういうことができます

まず、ホバーによって要素の表示・非表示を切り替えるとどんなことができるかのデモページがあるので、こちらをみてみてください。

以下のようなオレンジ色の四角形が四つ出てきますが、それぞれをホバーしてみると違うホバーアクションが表示されます。

パターン① 背景の色が変わる

パターン② 文字が表示される

パターン③ 背景が薄くなる

パターン④ 背景画像が出てくる

例の1部ですが、このようにいろいろとカスタマイズできます。

また、このブログの国際恋愛のページでも、この手法を使っています。

なっちとインドネシア人
デザイン未完成です。。。 地球が回ってるだけでもおもしろいよ!

このように汎用性が高いですが、簡単に実装できるので、以下で具体的な説明をしていきます〜。

 いざ実装!

実際に実装をしていきましょう!

ポイントは以下の4つだけです。

  1. 子要素のHTMLを加える
  2. 親要素を「positon: relative」にする
  3. 子要素の通常時のCSSを指定する
  4. 子要素のホバー時のCSSを指定する

抽象的すぎますが、実際のコードをみていきましょう。

子要素のHTMLを加える

例として、デモページを使用していきます。

以下がデモページのHTMLです。

ここで、「<p>ホバー前</p>」がホバー前に表示される要素になります。

「<div class=”mask mask××”></div>」のコードが、ポイント1「子要素のHTMLを加える」のHTMLになります。

このHTMLをホバー前とホバー後で表示・非表示することで、いろんなホバーアクションをカスタマイズできるようになるわけです。

では、一気に追加するCSSについて話していきます。

まず、ずらっと全体のコードを載せておきます。

以下、ポイントずつで説明していきます。

親要素を「positon: relative」にする

以下抜粋コード

上のCSSを親要素に追加してください。

ここを指定し忘れてしまうと、子要素になるべきものの範囲が広がってしまうのでご注意を。

子要素の通常時のCSSを指定する

以下抜粋コード

お次は、ホバー後に表示したい要素のホバー前のCSSを指定しておきます。

「display: none;」で非表示するのではなく、「opacity: 0;」で非表示のようにしておくというのがミソです。

また、「z-index」を親要素よりも上のレイヤーになるようにしておくことを忘れないでください。

レイヤーが上になっておかないと、ホバーしても見えなくなるよ!

子要素のホバー時のCSSを指定する

以下抜粋コード(パターン①)

ここで少し面白いセレクタ指定方法が出ますが、「li:hover .mask01」というのは、「li」が「hover」されたときの「.mask01」ということです。

スタイル指定で「opacity」「background-color」の指定を忘れないことさえおさえておけば完了です。

あとは、自分の好きなようにカスタマイズして遊んでください〜。

簡単だね!!!

 まとめ

以上、ホバーによって要素の表示・非表示を変える方法の紹介でした〜。

からくりとしては、positonを使って、レイヤーを重ねておき、上のホバー時に表示させたいレイヤーはopacityで表示・非表示させておくという感じになります。

ぜひホバーアクションに取り込んでみてください〜。

以上で、なっちる先生の授業を終わります。

素敵なプログラミングライフを〜!

タイトルとURLをコピーしました