CSS リンク文字をマウスオーバーで背景色を指定する

環境
Google Chrome 112.0.5615.138(Official Build) (64 ビット)
Windows 10 Home 64bit

書式

a:hover{
background-color:色の値
}

疑似クラス(:hover)を指定したa要素にこのプロパティを設定すると、ポイントした時の背景色(リンクテキストの背景色)を指定できます。

使用例

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

<style type="text/css">

a:hover {
background-color: lightblue;
color: #2b2b2b;
}

</style>

</head>
<body>

<p><a href="about.html">東京</a></p>

</body>
</html>

結果

文字リンク「東京」をホバーした時のリンクの背景色が「lightblue」に変わります。

 

CSS

Posted by arkgame