マウスオーバーした時、背景カラーをふわっと変える設定
「マウスオーバーした時、背景カラーをふわっと変える設定」をまとめておきます。
CSSで、元になる色と、マウスオーバーした時の色を設定するだけです。
以下で細かく見ていきます。
マウスオーバーした時、背景カラーをふわっと変える設定
1. もとの色を設定する
2. マウスオーバーした時の色とエフェクト効果の設定をする
次にマウスオーバーした時の色とエフェクト効果の設定をする。
「transition」につける値で、変化のスピードを調整可能。
【 CSS 】
1
#sample{
2
background-color:#ffffff;
3
}
4
5
#products-box::before,
6
#products-box::after{
7
position:absolute;
8
z-index:-1;
9
display:block;
10
content:'';
11
}
12
13
#products-box,
14
#products-box::before,
15
#products-box::after{
16
-webkit-box-sizing:border-box;
17
-moz-box-sizing:border-box;
18
box-sizing:border-box;
19
-webkit-transition:all .3s;
20
transition:all .6s;
21
}
22
【 関連記事 】 マウスオーバー時に効果をつけるtips記事
