Skip to content

マウスのカーソルを好きな画像に変更する

February 13

・javascript

マウスのカーソル（ポインター）の変更方法です。CSS / jQuery / JavaScript の3種類の変更方法を紹介します。

1. CSSで変更する

カーソルに使用したい画像を用意します。画像の形式はIEを含めたブラウザに対応する場合は「.cur」または「.ani」になります。

マウスのカーソルを変更したいエリアを対象にCSSを設定します。サイト全体であれば「body」に指定してください。マウスのカーソルは「cursor」プロパティの値を画像のURLにすることで変更できます。画像のカンマの後の指定は画像が表示されない場合の代替です。

.change {
  cursor: url(images/original.cur), default;
}

「マウスのカーソルを好きな画像に変更する」のデモはこちら

2. jQueryで変更する

カーソルに使用したい画像を用意します。画像の形式「png」です。カーソルを変更したいエリアの中に用意したカーソル用の画像を読み込みます。

<div class="change">
  <img src="original.png" alt="" />
</div>

CSSで必要な設定は主に以下になります。

  • デフォルトのカーソルを cursor: none; で非表示に
  • 変更後のカーソル画像を見えなくする
  • 任意の class 名がある場合は変更後のカーソル画像を見えるようにする
.change {
  position: relative;
  cursor: none;
}

.change img {
  position: fixed;
  visibility: hidden;
  opacity: 0;
}

.change.on_mouse img {
  visibility: visible;
  opacity: 1;
}

jQuery では、「エリアにマウスを置いたら画像を表示/エリアからマウスが外れたら画像を非表示」と「カーソルの画像をマウスに追従させる」の2つを設定します。画像の表示/非表示は addClass removeClass で行います。マウスの追従は、マウスの位置を取得し、その値を画像のCSSとして設定します。マウスと同じ位置に画像が表示され、マウスが動くと画像も一緒に動くため、マウスのカーソルが変わったように見えます。

$(function () {
  //マウスが置かれたらclass「on_mouse」を追加、外れたら「on_mouse」を削除
  $(".change2")
    .on("mouseover", function () {
      $(this).addClass("on_mouse");
    })
    .on("mouseout", function () {
      $(this).removeClass("on_mouse");
    });

  //マウスの位置にあわせて画像のCSSを指定
  function mouseMove(e) {
    $(".change2 img").css({
      top: e.clientY,
      left: e.clientX,
    });
  }
  $(".change2").on("mousemove", mouseMove);
});

「マウスのカーソルを好きな画像に変更する」のデモはこちら

3. JavaScriptで変更する

HTML / CSS は「 2. jQuery で変更する 」場合と同じです。

JavaScriptも、基本的には「 2. jQuery で変更する 」場合と同じで、エリアの class の付け替えは Element.classList.add Element.classList.remove で行います。画像の css での位置指定は Element.style.top Element.style.left で行います。

const cursor = document.querySelector(".change");
const cursorImg = document.querySelector(".change img");

const mouseMove = (e) => {
  cursorImg.style.top = `${e.clientY}px`;
  cursorImg.style.left = `${e.clientX}px`;
};

cursor.addEventListener("mouseover", (e) => {
  cursor.classList.add("on_mouse");
  mouseMove(e);
});

cursor.addEventListener("mouseout", () => {
  cursor.classList.remove("on_mouse");
});

「マウスのカーソルを好きな画像に変更する」のデモはこちら (CodeSandbox)

参考

Tags

how-to