CSSでのマウスオーバーの実装
みなさん、こんにちは!
京都事業所受託プロダクトチームインターン生の肖かえいです😆
今日は新たにCSSのマウスオーバーについて勉強しました。
マウスオーバーとは
マウスオーバーとはカーソルを何かの上に乗せる操作のことです。
例えばなにかリンクをクリックする際に、必ずリンクの上にカーソルを乗せますよね。
その行為がマウスオーバーです!
でたまにマウスオーバーをすると図形の色が変わったり、文字の色がかわったりしますよね!
今日はCSSでそれをどうやって実現するのか?ということについて学びました!
CSSでの実現方法
ここで登場するのが疑似要素です!疑似要素とは簡単にいえば、ある要素の特定の部分に装飾を付けられるようにできるものです。
イメージとしてはゲームソフトのDLCのようなものです。
CSSでの書き方は要素:hover{装飾内容}のような感じで記載することで実現できます!
このような動的な部分はJavascript等のプログラミング言語を用いないといけないと思っていたので
CSSでも実装できるのは驚きました!
それを知らず、大学の課題でコツコツとJavascriptで書いていた私の苦労はなんだったんでしょう…。
南無南無…。
---------------------------------------------------------------------------------------------
インターン募集ページ: https://guardian.jpn.com/recruit/intern/
メンバー紹介ページ:https://guardian.jpn.com/member/Xiao_Kaei/
---------------------------------------------------------------------------------------------
*コメント*
NEW
-
date_range 2026/05/14
-
date_range 2026/04/30
6月中に一人で顧客MTGへ...
-
date_range 2026/04/08
フィリピンの経験を糧に...
-
date_range 2026/03/30
【長期インターン】「AI...
-
date_range 2026/02/27
【長期インターン】卒業...
*COMMENT*
谷口 かなこ
*コメント*
良ければまた、どういう視点の検索ワードで画像を検索して、選んでいるのか教えて下さい。
今月もお疲れ様でした。
来月もよろしくお願いします!
*コメント*