こんにちは、フロントエンドエンジニアのまさにょんです。
今回は、CSSでhoverした時に透明な緑色の背景をあてて、ハイライト表示する方法について解説します。
目次
CSSでhoverした時に透明な緑色の背景をあてて、ハイライト表示する
今回のSampleCodeを実行して、要素にhoverすると、透明な緑色の背景があたって、要素はハイライト表示されます。
![](https://masanyon.com/wp-content/uploads/2023/05/highlight-1024x282.png)
CSSでhoverした時に透明な緑色の背景をあてて、ハイライト表示するSampleCodeは、次のとおりです。
<html lang="ja">
<head>
<title>透明な緑色の背景をあてる</title>
<style>
.container {
width: 350px;
text-align: center;
margin: 0 auto;
}
.highlight:hover {
/* RGB & 透明度(opacity)の設定 */
background-color: rgba(0, 255, 0, 0.2);
padding: 0.2em;
border-radius: 8px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="container highlight">
<p>
hover状態になったら、
<br>
透明な緑色の背景をあてて、ハイライトする🔥
</p>
</div>
</body>
</html>
おすすめ書籍(HTML&CSS編)
プログラミング学習・エンジニア転職関連の情報
自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)
![](https://www15.a8.net/0.gif?a8mat=3NNG1X+D8W8C2+3GWO+6O1Z5)
『GEEK JOBキャンプ』スピード転職コース(無料)
![](https://www13.a8.net/0.gif?a8mat=3NNG1X+DAOJ5E+40C4+5ZMCH)
【IT道場】入校時0円! 就職目的プログラミングスクール
![](https://www14.a8.net/0.gif?a8mat=3NNG1X+DML78Y+53W0+609HT)
エンジニア転職なら100%「自社開発」求人に強い【クラウドリンク】
![](https://www14.a8.net/0.gif?a8mat=3NNGTV+ACPDGY+4VYG+60H7L)
『techgym』 (Python特化・無料)
![](https://www14.a8.net/0.gif?a8mat=3NNG1X+C2MGDU+4PGA+BY641)
参考・引用
Twitterやってます!Follow Me!
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!