CSSのcursorプロパティを使用してポインターのホバーエフェクトを作成する方法

1. ターゲット要素に直接cursorプロパティを適用する方法:

.target-element {
  cursor: pointer;
}

2. クラスを使用して複数の要素に同じホバーエフェクトを適用する方法:

.hover-effect {
  cursor: pointer;
}

HTMLの要素にクラス名を追加します:

<div class="hover-effect">要素1</div>
<div class="hover-effect">要素2</div>
<div class="hover-effect">要素3</div>

3. ネストされた要素に異なるホバーエフェクトを適用する方法:

.parent-element {
  cursor: pointer;
}
.child-element {
  cursor: help;
}

HTMLの要素をネストします:

<div class="parent-element">
  親要素
  <div class="child-element">子要素</div>
</div>

これらはいくつかの一般的な方法ですが、実際の使用方法はデザインの要件によって異なります。cursorプロパティにはさまざまな値があり、ポインター以外にも他のエフェクトを指定することもできます（例: "crosshair", "wait", "text" など）。

注意点として、一部の要素（例: テキストエリア、ボタンなど）ではデフォルトでポインターのホバーエフェクトが適用される場合があります。それらの要素に追加の設定を行う必要はありません。

以上が、CSSのcursorプロパティを使用してポインターのホバーエフェクトを作成する方法の一例です。デザインや要件に応じて、適切な方法を選択してください。