CSSでのマウスオーバーの実装 | 長期有給インターン生の日常|株式会社ガーディアン | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー

みなさん、こんにちは！
京都事業所受託プロダクトチームインターン生の肖かえいです😆

今日は新たにCSSのマウスオーバーについて勉強しました。

マウスオーバーとは

マウスオーバーとはカーソルを何かの上に乗せる操作のことです。
例えばなにかリンクをクリックする際に、必ずリンクの上にカーソルを乗せますよね。
その行為がマウスオーバーです！
でたまにマウスオーバーをすると図形の色が変わったり、文字の色がかわったりしますよね！
今日はCSSでそれをどうやって実現するのか？ということについて学びました！

CSSでの実現方法

ここで登場するのが疑似要素です！疑似要素とは簡単にいえば、ある要素の特定の部分に装飾を付けられるようにできるものです。

イメージとしてはゲームソフトのDLCのようなものです。
CSSでの書き方は要素:hover{装飾内容}のような感じで記載することで実現できます！

このような動的な部分はJavascript等のプログラミング言語を用いないといけないと思っていたので

CSSでも実装できるのは驚きました！
それを知らず、大学の課題でコツコツとJavascriptで書いていた私の苦労はなんだったんでしょう…。
南無南無…。
---------------------------------------------------------------------------------------------
インターン募集ページ: https://guardian.jpn.com/recruit/intern/
メンバー紹介ページ：https://guardian.jpn.com/member/Xiao_Kaei/
---------------------------------------------------------------------------------------------