HOME > CSS > マウスホバーで背景色をゆっくり変える

  • 投稿日： 最終更新日：
  • タグ：
  • カテゴリー： CSS

マウスホバーで背景色をゆっくり変える

transitionで背景色が変わるスピードを調節

transitionを使って時間を指定するだけで背景色が変わるスピードを調節できる。

#mousehoverSample a {
	display: block;
	width: 200px;
	height: 100px;
	border: 1px solid #D1D1D1;
	background: #fff;
	text-decoration: none;
	color: #333;
	line-height: 1.4;
	padding: 10px;
}
#mousehoverSample a:hover {
	background: #f7f2d5;
	border-color: #fff;
	opacity: 1;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}

実装

borderを白に変更することで、ボックスがゆっくり小さくなっているようにも見える。