【CSS】マウスホバーでヌルッとしたアニメーションボーダーをつける

5月 30, 2022 5月 30, 2022

こた

こんにちは！WEBデザイナーのこたです。

WEB制作初心者の皆さん！マウスホバー使ってますか？

マウスホバーとはパソコンの画面にマウスでカーソルを合わせた時に何らかの処理を行うことになります。

また、マウスをカーソルから離すと処理が元に戻ります。

Web制作でリンクボタンにこの処理を用いることが多いです。

ユーザーの操作に対するフィードバックを作る時です。

よくあるエフェクトでは「リンクボタンにカーソルを合わせるとリンクが少し不透明になって、ボタンと認識される」という処理を用いることが多々あります。

ただ、マウスホバーにはまだまだ魅力がありますよ！

今回は今までホバーに関心がなかった人に少しでもホバーをつける楽しみを体感していただきたいので、この記事を書いてみます。

では、参りましょう！

マウスホバーの設定方法

セレクタ {
プロパティ:値;
}

セレクタ:hover {
プロパティ:値;
}

"セレクタ:hover"の{ }カッコ内には、変化後のプロパティを書きましょう！

マウスホバーしたときに"背景色"をつける方法

:hoverセレクトのスタイルにbackgroundプロパティを追加しておくと、ホバーしたときだけにリンクテキストに背景色をつけるることができます。

a:hover{
  color:#fff;
  background:#333; 
}

See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

マウスホバーしたときに"枠線"をつける方法

a:hover{
 outline: 1px solid #333;
}

outlineプロパティは、要素のボックスに外枠線をつけるのに使われます。

borderプロパティと同じところに線が惹かれ、設定する値も全く同じになります。

違う点は、outlineプロパティで引かれた枠線は、要素のボックスモデルには影響しないことです。

outlineプロパティは実際のWebデザインで使うことはあまり多くはありませんが、状況によって枠線がついたり、消えたりするのに使うのに便利です！

なせborderプロパティではなくoutlineプロパティの方が良いのか？

リンクの通常時とホバーのときで、borderプロパティで設定するボーダーがあったり、なかったりすると、ボックスのサイズが変わってしまいます。その結果、リンクテキストにホバーすると、そのテキストの位置がずれてしまいます。
違和感のある動作になってしまうので、outlineプロパティを使用する方が良いです。

See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

マウスホバーしたときに"左から右にアニメーション下線"を引く

おしゃれなマウスホバーをご紹介します。

アニメーションを使用したホバー方法になります。

アニメーションを使うことで、ヌルっとした動きをつけることができます。

今回はセレクタにborderを引くのではなく、擬似要素を使いborderを引きます。

a{
  position:relative;
  display:inline-block;
  color:#333;
  text-decoration: none;
}
a:after{
  content: ''; 
  position: absolute; left: 0; 
  bottom: -2px; width: 0%; 
  height: 3px; 
  background: #333; 
  z-index: -1; 
  transition: all 0.5s; 
}
a:hover:after{ 
  width: 100%; 
}

See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.