hover & active

定義

hover:游標移過
active:游標點擊時

hover

.block 請點擊
.block
 width: 100px
 height: 100px
 border: solid 1px

.block:hover
 background-color: #283618

Display

請點擊

active

.block 請點擊
.block
 width: 100px
 height: 100px
 border: solid 1px

.block:active
 background-color: #F0F3BD

Display

請點擊

進階:操控内部元素

.block1 請點擊
 .block2
 .block3
.block1
 width: 100px
 height: 100px
 border: solid 1px

.block2,.block3
 width: 20px
 height: 20px
 border: solid 1px

.block1:hover 
 .block2
  background-color: #04A777
  width: 80px

.block1:active
 background-color: #05668D

Display

請點擊

進階:延緩變化

.block1 請點擊
 .block2
 .block3
.block1
 width: 100px
 height: 100px
 border: solid 1px

.block2,.block3
 width: 20px
 height: 20px
 border: solid 1px

.block1:hover 
 .block2
  background-color: #04A777
  width: 80px
  transition-duration: 1s


.block1:active
 background-color: #05668D
 transition-duration: 1s

Display

請點擊

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *