CSS マウスオーバー(hover)時の背景色を指定する

2023年4月25日

環境
Google Chrome　112.0.5615.138（Official Build）（64 ビット）
Windows 10 Home 64bit

書式
.クラス名:hover{
background-color: 色;
}
htmlで追加したクラスに好みの背景色を設定して：hover 疑似クラスにマウスを重ねた時の背景色を指定します。

使用例

<html>
<head>
<title>テスト</title>

<style type="text/css">

/* 通常時の背景色 */
.cft {
    background-color: #b1eeff;;
    }
/* マウスオーバー時の背景色 */
.cft:hover {
    background-color: red;
    }
</style>

</head>
<body>

<div class="cft">東京tokyo</div>
</body>
</html>

結果
文字「東京tokyo」をマウスオーバー時背景色が変わります。

CSS

Posted by arkgame