CSSでhoverした時に透明な緑色の背景をあてて、ハイライト表示する方法

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、CSSでhoverした時に透明な緑色の背景をあてて、ハイライト表示する方法について解説します。

1 CSSでhoverした時に透明な緑色の背景をあてて、ハイライト表示する
2 おすすめ書籍(HTML&CSS編)
3 プログラミング学習・エンジニア転職関連の情報
4 参考・引用
5 Twitterやってます！Follow Me！
6 最近の投稿

CSSでhoverした時に透明な緑色の背景をあてて、ハイライト表示する

今回のSampleCodeを実行して、要素にhoverすると、透明な緑色の背景があたって、要素はハイライト表示されます。

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>