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

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

書式

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
a:hover{
background-color:色の値
}
a:hover{ background-color:色の値 }
a:hover{
background-color:色の値
}

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

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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>

結果

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
文字リンク「東京」をホバーした時のリンクの背景色が「lightblue」に変わります。
文字リンク「東京」をホバーした時のリンクの背景色が「lightblue」に変わります。
文字リンク「東京」をホバーした時のリンクの背景色が「lightblue」に変わります。

 

CSS

Posted by arkgame