マウスホバーアクションの見本パターン色々:全てコピペで実装可能

Coding

今回は、HTML/CSSでマウスホバーアクションの実装の仕方とコピペで使用可能なデザイン&動きの見本を紹介します。

HTMLとCSSをコピペするだけで反映されます。コピペした後に自分なりに編集してオリジナルのデザインにしてみて下さい。

使い方

  1. HTMLをbodyの好きな箇所にコピペ
  2. 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://ka-holidayrefresh.com/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://ka-holidayrefresh.com/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://ka-holidayrefresh.com/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://ka-holidayrefresh.com/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とは

先ほどから、全てのホバーアクションについている「transition」とは、「hover」した時のCSSを反映させるまでの時間を指定するものです。

「transition」が無いのと微妙な不快感がありますので、基本的には「transition」と「hover」がセットで使っていくのが良いでしょう。


以上が「マウスホバーアクションの見本パターン色々:全てコピペで実装可能」でした。

今後もいろんなマウスホバーのパターンを追加していきたいと思ってます。少しでも参考になっていただけたら幸いです。

2020年4月12日CodingCSS,HTML,Reference

Posted by KT