要素のhoverとactiveについて

概要

UXの観点から、ボタンや要素はフォーカスしたときに表示を変えるのが好ましい。

hover

要素はクラスかId:hoverでカーソルを合わせた時のスタイルを変更できる。

button{
	border: 2px solid gray;
}
 
button:hover{
	border: 2px solid white;
}

active

こちらはボタンが押された際などにスタイルを変更する場合に使用する。
クラスかId:activeで記述する。

button{
	border: 2px solid gray;
}
 
button:hover{
	border: 2px solid white;
}
 
button:active{
	border: 2px solid Blue;
}