Tailwind CSS 練習問題 36:Tailwindのカーソル表示ユーティリティ
要素にマウスカーソルを乗せた際、カーソルの形状を指差しアイコン(ポインター)に変更したい場合、正しいTailwindクラスはどれか。
- cursor-pointer
- cursor-hand
- pointer-events-none
- cursor-auto
- cursor-default
正解と解説を見る
正解:cursor-pointer
マウスカーソルの見た目をポインター(指差しアイコン)に変更するには`cursor-pointer`クラスを使います。
【正解の理由】
`cursor-pointer`はCSSの`cursor: pointer`に対応するユーティリティクラスで、クリック可能な要素であることを視覚的に示す際によく使われます。
【不正解の理由】
• 「cursor-hand」:Tailwindに存在しないクラス名で、指定しても効果がない
• 「pointer-events-none」:要素へのクリックやホバーなどのマウス操作自体を無効化するクラスで、カーソル形状とは無関係
• 「cursor-auto」:ブラウザ標準のカーソル挙動に戻すクラスで、ポインター形状を強制しない
• 「cursor-default」:矢印型の通常カーソルを指定するクラスで、指差しアイコンにはならない