CSS

2022.02.25

【CSS】グーやパーに変形!マウスカーソルに掴む動作を実装する方法

スライダーなど、ドラッグで動かすことができる要素の上にカーソルを置いた時、カーソルをドラッグできるような見た目に変形させるとユーザーにとっても親切です。

まずは掴めそうな

実装方法はとても簡単で、cursor: grab;を指定するだけです。

.sample{
  cursor: grab;
}

さらにドラッグしている時は掴んでいるような動作にしたい場合は以下のようにします。

.sample{
  cursor: grab;
}

.sample:active {
  cursor: grabbing;
}

activeの時に、cursor: grabbing;を指定すると掴む動作が実装できます!

実際にスライダーに実装してみました。

See the Pen Untitled by spiqa design (@spiqa_design) on CodePen.

自分のマウス動作に合わせてカーソルが掴んだり離したりするのでとても気持ちいいです!
とても簡単なのでぜひ実装してみてくださいね♪

この記事をシェアする

関連記事

  • 2022.01.24

    効率的なCSS記述になる!inherit の使い方

    CSS

  • 2021.11.02

    CSSのcursor:pointerが効かない時にまず確認したい3つのこと

    CSS

  • 2021.10.01

    【コピペで簡単!】CSSのみで作るシンプルなセレクトボックス(矢印の消し方や枠のサイズ変更方法も解説)

    CSS

おすすめ記事

  • 2022.04.12

    Chromeで画像やテキストがぼやけるときの対処法

    コーディング

    制作

  • 2022.04.22

    【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違いと使い分けを解説!

    制作

    動画

  • 2021.09.29

    【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおすすめポイント

    デザイン

×