マウスオーバーアクションをつける – CSS :hover

ちなみに、画像を大きくしたいからといってimgタグで配置した画像をtransform:scale( )で大きくしてしまうと、当然ですが外枠(要素のwidthとheight)ごと大きくなってしまいます。 なので、サンプルのように枠はそのままに画像だけ大きしたい場合は、background-sizeプロパティを使う必要があるというわけですね。 ※background-sizeプロパティについての記事はこちらをご覧ください。

・よく使われるマウスオーバーアクションの代表は、不透明度を変化や要素の拡大！
・不透明度を変化させる場合は、不透明度を下げ過ぎずさりげない感じにすると良い！
・外枠はそのままで画像を大きく拡大させたい場合は背景画像として配置し、background-sizeを使うと良い！

マウスオーバーアクション例２

マウスオーバーアクションはクリックできるボタンや画像だけでなく、メニューの開閉として利用されることも多いです。

メニューのタイトル（メニューリストの一番上）以外をopacity: 0; height: 0; などでマウスポインタが乗っかっていない時に隠しておきます。

そしてメニュー全体（サンプルではul要素）のマウスオーバーの擬似クラスと、セレクタ指定の > li を使い、ul要素にマウスポインタが乗っかった時のli要素に対し、opacity、heightの値を指定してメニューが現れるようにすれば完成です。

ABOUT
ご挨拶
会社概要
当Webサイトについて

ここで一つ注意点です。上のサンプルではheightの値を変えることでメニューが開閉するようなアニメーションにしていますが、メニューが開いた後のheightをautoなどのブラウザの自動計算値にしてしまうと、 transitionで指定したアニメーションの完了時間が無視されて、アニメーションにならなくなります。

なので、アニメーションにする場合のheightの値は【 **px（他、remなど）】というように、明示的に示す必要があります。

ABOUT
ご挨拶
会社概要
当Webサイトについて

▲class名が「02」を飛ばして「03」になっているのはあまり気にしないでください。 pointer-eventsプロパティを、none→autoにしているのは、このように設定しないと、マウスポインタが離れてメニューが左にスライドして消えかける際に、メニューをマウスポインタで追いかけようとするとおかしな挙動になってしまうからです。要するに、 左に消えていくメニューにマウスポインタが乗っかっても影響が出ないようにするためのCSS です。

・マウスオーバーアクションは、メニューの開閉に使われることも多い！
・height/widthをマウスオーバーアクションに利用する時は、値がautoだとアニメーションにならない場合がある！
・場合によってはpointer-eventsプロパティなど、様々なCSSを組み合わせる必要が出る場合もある！

今回の動画で紹介したコード！

カテゴリーリンク JavaScript MOBILE APP ALL CATEGORY 著者について - author profile - Michihiro モバイルアプリ（iOS・Android)ディベロッパー＆デザイナー

📝ツール・言語：JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

📎📎📎📎📎📎📎📎📎📎