今回は、HTML/CSSでマウスホバーアクションの実装の仕方とコピペで使用可能なデザイン&動きの見本を紹介します。
HTMLとCSSをコピペするだけで反映されます。コピペした後に自分なりに編集してオリジナルのデザインにしてみて下さい。
- HTMLをbodyの好きな箇所にコピペ
- CSSをスタイルシートにコピペ
一つ一つに個別でclassを付けてHTMLに記述しています。基本的に被らなそうなクラス名にしていますが、classが重複してしまうとスタイルが崩れる場合があるのでご注意下さい。その場合はclass=”この部分“を任意のものにすれば解決します。
ホバーアクションとは
ホバーアクションとは、マウスカーソルが要素の上に乗った状態のことを指します。マウスホバーした際に、その要素が何かしらのアクションを起こす指定を「ホバーアクション」と呼んでいます。
（マウスホバーアクション、マウスホバー 、マウスオーバーなどいろんな言われ方があり多少の違いはあるが、意味は殆ど同じ場合が多い。）
例えば下記の例で見てみると、左側のグレーの枠にマウスを乗っけても何も起こりませんが、右側のオレンジの枠にマウスを乗っけると背景色が白に変わります。
この動きこそが、実際のマウスホバーアクションと言われるものです。
マウスホバーアクションの指定方法
では実際のマウスホバーの指定方法について説明していきます。
マウスホバーを読み込むには、css classに擬似クラスである「:hover」を付けてあげるだけです。
そして「css class:hover」に対して記述したスタイルがマウスホバー後のスタイルになっています。
先ほどの例で言うと「btn」のクラスに対してはオレンジの背景色を指定して、「btn:hover」に対しては白の背景色が指定してあります。なのでこの様にマウスホバーすると白背景になると言ったアクションが起きます。
ホバーアクション有りHTML
<a class="btn">ホバーアクション有り</a>CSS
/*ホバー無し状態のスタイル*/
.btn {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
background: #f4b364;
color: #111!important;
border: solid 2px #f4b364;
border-radius: 3px;
transition: .4s;
}
/*ホバー無し状態のスタイル＿ここまで*/
/*ホバー有り状態のスタイル*/
.btn:hover {
background: #fff;
color: #f4b364;
}
/*ホバー有り状態のスタイル＿ここまで*/この様にしてホバー後のスタイルを付けていきます。
と言うことは:hover後のスタイルは基本的には何でも出来ます。ただしホバー前とホバー後で大きく見た目が変わると不自然なので、なるべく見た目は変えずにアニメーションの様な動きを付けてあげるだけに留まった方が良さそうです。
次では、そのよく使われるマウスホバーアクションの例をいくつか紹介します。
マウスホバーアクションの見本パターン
マウスホバーアクションの見本パターンをいくつか紹介します。
今回使用するスタイルの基本となるHTMLは下記の様な記述です。
<a class="hover00">ホバーアクション有り</a>色の反転
背景黒テキスト白を反転（背景白テキスト黒に）
色の反転HTML
<a class="hover01">色の反転</a>CSS
/*ホバー無し状態のスタイル*/
.hover01 {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
background: #111;
color: #fff!important;
border: solid 2px #111;
border-radius: 3px;
transition: .4s;
}
/*ホバー無し状態のスタイル＿ここまで*/
/*ホバー有り状態のスタイル*/
.hover01:hover {
background: #fff;
color: #111!important;
}
/*ホバー有り状態のスタイル＿ここまで*/透明感を出す
ふわっと透明感を出してクリックできる感を演出。
透明感を出すHTML
<a class="hover02">透明感を出す</a>CSS
/*ホバー無し状態のスタイル*/
.hover02 {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
background: #0c5727;
color: #fff!important;
border-radius: 3px;
transition: .4s;
}
/*ホバー無し状態のスタイル＿ここまで*/
/*ホバー有り状態のスタイル*/
.hover02:hover {
opacity: .5
}
/*ホバー有り状態のスタイル＿ここまで*/凹むボタン
ボタンでよく使われる押し込まれた様な動き。
凹むボタンHTML
<a class="hover03">凹むボタン</a>CSS
/*ホバー無し状態のスタイル*/
.hover03 {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
background: #777;
border-bottom: 0.1875em solid #666;
color: #fff!important;
transition: .2s;
}
/*ホバー無し状態のスタイル＿ここまで*/
/*ホバー有り状態のスタイル*/
.hover03:hover {
transform: translateY(0.1875em);
border-bottom-color: transparent;
}
/*ホバー有り状態のスタイル＿ここまで*/浮き上がる
先ほどの凹みとは反対に要素が浮き上がります。
浮き上がるHTML
<a class="hover04">浮き上がる</a>CSS
/*ホバー無し状態のスタイル*/
.hover04 {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
background: #777;
color: #fff!important;
transition: .2s;
}
/*ホバー無し状態のスタイル＿ここまで*/
/*ホバー有り状態のスタイル*/
.hover04:hover {
transform: translateY(-0.1875em);
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
}
/*ホバー有り状態のスタイル＿ここまで*/縦に回転
X軸方向に回転します。
HTML
<img src="https://kt-life.net/wp-content/uploads/2020/04/pig.jpg" alt="" class="hover05">CSS
/*ホバー無し状態のスタイル*/
.hover05 {
width:30%;
transition: all 1s linear 0s;
}
/*ホバー無し状態のスタイル＿ここまで*/
/*ホバー有り状態のスタイル*/
.hover05:hover {
transform: rotateX(360deg);
}
/*ホバー有り状態のスタイル＿ここまで*/横に回転
Y軸に回転します。
HTML
<img src="https://kt-life.net/wp-content/uploads/2020/04/pig.jpg" alt="" class="hover06">CSS
/*ホバー無し状態のスタイル*/
.hover06 {
width:30%;
transition: all 1s linear 0s;
}
/*ホバー無し状態のスタイル＿ここまで*/
/*ホバー有り状態のスタイル*/
.hover06:hover {
transform: rotateY(360deg);
}
/*ホバー有り状態のスタイル＿ここまで*/回転
時計回りに回転します。
HTML
<img src="https://kt-life.net/wp-content/uploads/2020/04/pig.jpg" alt="" class="hover07">CSS
/*ホバー無し状態のスタイル*/
.hover07 {
width:30%;
transition: all 1s linear 0s;
}
/*ホバー無し状態のスタイル＿ここまで*/
/*ホバー有り状態のスタイル*/
.hover07:hover {
transform: rotateZ(360deg);
}
/*ホバー有り状態のスタイル＿ここまで*/拡大
画像が拡大されます。
HTML
<img src="https://kt-life.net/wp-content/uploads/2020/04/pig.jpg" alt="" class="hover08">CSS
/*ホバー無し状態のスタイル*/
.hover08 {
width:30%;
transition: all 0.5s ease 0s;
}
/*ホバー無し状態のスタイル＿ここまで*/
/*ホバー有り状態のスタイル*/
.hover08:hover {
transform: scale(1.1, 1.1);
}
/*ホバー有り状態のスタイル＿ここまで*/リンクの色
テキストリンクの色が変わる様に。
リンクの色HTML
<a href="#" class="hover09">リンクの色</a>CSS
/*ホバー無し状態のスタイル*/
.hover09 {
color: #4e92df;
text-decoration: none;
}
/*ホバー無し状態のスタイル＿ここまで*/
/*ホバー有り状態のスタイル*/
.hover09:hover {
color:#dc143c;
text-decoration: none;
}
/*ホバー有り状態のスタイル＿ここまで*/線がスッと出る
下線がスッと出てきます。
線が付いてくるHTML
<a href="#" class="hover010">線が付いてくる</a>CSS
/*ホバー無し状態のスタイル*/
.hover010 {
display: inline-block;
position: relative;
color: #4e92df!important;
text-decoration: none;
}
.hover010::after {
position: absolute;
content: '';
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: #dc143c;
transition: all 0.3s ease 0s;
}
/*ホバー無し状態のスタイル＿ここまで*/
/*ホバー有り状態のスタイル*/
.hover010:hover {
color:#dc143c!important;
text-decoration: none!important;
}
.hover010:hover::after {
width: 100%;
/*ホバー有り状態のスタイル＿ここまで*/先ほどから、全てのホバーアクションについている「transition」とは、「hover」した時のCSSを反映させるまでの時間を指定するものです。
「transition」が無いのと微妙な不快感がありますので、基本的には「transition」と「hover」がセットで使っていくのが良いでしょう。
以上が「【CSS】ホバーアクションの実装方法：コピペ用見本パターン10種」でした。
今後もいろんなマウスホバーのパターンを追加していきたいと思ってます。少しでも参考になっていただけたら幸いです。
