CSSでホバー時に指マークを表示させる

CSS SCSS

CSSでホバー時に指マークを表示させる

CSSでホバー時にカーソルを指マーク（手のひらのアイコン）に変更するためには、cursor プロパティを使用します。
以下は、ホバー時にカーソルを指マークにするための基本的なCSSコードの例です。

まず、HTMLファイルを作成します。
以下はその例です。

HTMLファイル (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ホバー時のカーソル変更</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="test-hover-area">
    ホバーしてみてください
  </div>
</body>
</html>

次に、CSSファイルを作成します。
以下のコードは、.test-hover-area クラスを持つ要素にホバーしたときに指マークのカーソルを表示させるためのCSSです。

CSSファイル (styles.css)

.test-hover-area {
  padding: 20px;
  border: 1px solid #ccc;
  text-align: center;
  background-color: #f9f9f9;
  transition: background-color 0.3s ease;
}

.test-hover-area:hover {
  cursor: pointer; /* ホバー時に指マークのカーソルを表示 */
  background-color: #e0e0e0; /* 背景色の変化（オプション） */
}

この例では、.test-hover-area クラスを持つ div 要素に対してホバー時にカーソルを pointer に設定しています。
これにより、ユーザーがその要素の上にカーソルを置いたときに、指マークのカーソルが表示されます。
cursor: pointer; は、リンクやボタンなどのインタラクティブな要素でよく使用されるスタイルです。

background-color プロパティを使用してホバー時に背景色を変えることもできますが、これはオプションです。