cssボタンフォーカス擬似クラスの4つの状態

2022-03-01 22:13:49

1.通常状態 2.マウスホバー状態 3.アクティブクリック状態 4.フォーカス取得状態

focusは、リンクのクリックでできる点線枠をキャンセルするためによく使われます

   a:focus{ <未定義

          outline: なし。

      }

<!DOCTYPE html>

        .btn:hover { <未定義

            background-color: #ff0000。

        }

/*active ホバーで追従しないと上書きされます */

        .btn:focus { <未定義

            background-color: #00ff00。

        }

        .btn:active { <未定義

            background-color: #000000;

        }

    </style>

</head>

<body>

<button class="btn">hehhe</button>

</body>

</html>

最新