My Vector Space

  人生は寄り道してなんぼ

マウスオーバーした時、背景カラーをふわっと変える設定

 

まずは、もとの色を設定
 【 CSS 】
 1
  #sample{background-color:#000000;
 2
                width:○○○px;
 3
                height:○○○px;
 4
  }

 

次にマウスオーバーした時の色とエフェクト効果を設定
 【 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記事

PAGE TOP