Last-modified: 2011-12-26 (月) 01:24:43
HTML・CSS/マウス操作によって、見た目を変える(hover・active)


確認したときの環境 †

↑

方法 †

  1. マウスが乗ったときは、hover疑似クラス
    マウスが押されたときは、active疑似クラスを使う。
    Everything is expanded.Everything is shortened.
      1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12

     
-
|
|
|
!
 
-
|
|
|
!

    /* マウスが乗った状態 */
a:hover {
    color: #215dc6;
    background-color: #CCDDEE;
    text-decoration: underline;        /* 文字装飾：下線 */
}
/* マウスが押されたとき */
a:active {
    color: #CFB354;
    background-color: #CCDDEE;
    text-decoration: underline;        /* 文字装飾：下線 */
}