2023.05.09CSSを学習していると、hover(ホバー)というテクニックが出てきます。使えるようになると、指定している要素に重なった時、スタイルが変わるので、面白い表現が可能になります。今回の記事では「hover」の使い方をサンプルを用いて解説します。効かない時の対処法も併せて紹介します。まとめhoverとは?hoverとは、CSSの擬似クラスで、カーソルが対象にホバーした時(重なった時)スタイルを変更する為のものです。擬似クラスとは、指定の要素が特定の状態である場合に適用するスタイルを決めるもの。カーソルを合わせると、ボタンの色や形が変わったり、画像が動いたりするのを見たことがあるかもしれませんが、これは、hoverを使って実装している場合が多いです。書式について書式は下記の通りです。プロパティ名:値;}要素名の後ろに「:hover」を付けるだけとなります。要素と「:hover」に空白を入れると効かなくなるので注意して下さい。これだけ見ても、使い方のイメージが難しいと思いますので、サンプルを用いて解説していきます!サンプル紹介では、サンプルを用意しましたので、詳しく見てみましょう。このサンプルで、hoverで何ができるのかイメージができると思います。重なると、ボタンのスタイルが変わるサンプルカーソルを重ねると、ボタンのスタイルが変わる時のサンプルコードです。考え方としては、重なったら変わる部分を、「:hover」の部分に書けば良いです。今回のサンプルの場合、「背景色(青)、文字色(白)、形(四角)」→「背景色(空色)、文字色(黒)、形(楕円形)、変化の時間は0.5秒で」になります。CSSプロパティが出てきていますが、1つ1つ意味を調べてみて下さい。transitionプロパティ(変化の時間の指定)は、hoverとよく使われるプロパティです。指定したはずなのに、hoverが効かない場合の対処法を紹介しておきます。・「:hover」の前に空白が入っている・「:」が多い「:hover」の前に空白が入っている「:hover」の前に空白が入っていると、指定が効かなくなるので注意が必要です。要素と「:hover」は、空白無く詰めて下さい。「:」が多い本記事では詳しく紹介しませんが、擬似要素(要素の一部に対してスタイルを適用する)というものがあり、その際の書式が「::〇〇」の為、混同して使用してしまうパターンです。「::hover」と指定しても効かないのでご注意ください。まとめ「hover」というものがどんなものか理解できましたでしょうか?使えるようになると、色々と面白い表現が可能になりますので、是非使い方をマスターしてみて下さい。2023.05.13CSSCSS【CSS】基本的な書き方について。2023.05.13CSSリモートワークで眠い時の対処法をまとめてみた【相対パス】「./」と「../」の違いとは?ホームWEB制作CSSkazu27歳、法学部出身の現役WEBデザイナーです。資格は、WEBデザイン技能検定3級、ワープロ検定2級、情報処理検定2級を取得しています。旅行が好きで色々な場所に行っています。このブログでは、IT企業の現場で経験した事や勉強した事、解説記事や副業等、ITならではの、ちょっと知ってるだけでも違うアレコレをご紹介しています。【HTML】brタグの使い方のご紹介!改行されない(効かない)場合の対処法もご紹介!サンプル付き!2023.02.192023.05.13【2023年最新】Googleアドセンスの審査に通らない!合格する為のポイントをまとめてみた。2023.01.232023.05.28【悪用】AirTag(エアタグ)に注意!ストーカー、車に設置され住所特定も?対策方法を考えてみた。副業系ホーム検索トップサイドバータイトルとURLをコピーしました。