1. HOME
  2. プログラミング
  3. JavaScript
  4. 【JavaScript】hover時にマウスカーソルを変更する方法

【JavaScript】hover時にマウスカーソルを変更する方法

【JavaScript】hover時にマウスカーソルを変更する方法

JavaScriptを使用して、hover時にマウスカーソルを変更する方法を知りたい！

こういった疑問に答えていきます。

最近のWebサイトでは、マウスカーソルの形状が変更されているものを多く見かけるようになりました。
今回はこのマウスカーソルを、hover時に変更されるようにJavaScriptで実装していきたいと思います。

では早速やっていきましょう！

目次

hover時にJavaScriptでマウスカーソルを変更する方法

ファイルの準備

では早速実装していきます。
今回使用するHTMLファイル・CSSファイルはGitHubにアップしているので、活用してください。

使用するイベント

今回使用するイベントは下記の3つになります。

  • mousemove
    → 対象要素内で、マウスカーソルを動かすたびにイベントが発火
  • mouseenter
    → 対象要素内に、マウスカーソルが入ってきた時にイベントが発火
  • mouseleave
    → 対象要素内から、マウスカーソルが出た時にイベントが発火

今回は、「mouseenter / mouseleave」を使用していますが、今回の場合では「mouseover / mouseout」でも構いません。

要素の取得

取得する要素は、hover時にマウスカーソルを表示させる領域と、マウスカーソル要素の2つを取得していきます。

const mouseEvent = function () {
  let el = document.querySelector(".box"); //hover時にマウスカーソルを表示させる領域
  let cursor = document.querySelector(".mouse"); //マウスカーソル要素
};

mouseEvent();

mousemoveイベントの設定

mousemoveイベントの対象要素は、windowで設定します。
CSSの設定で、マウスカーソル要素は常にページの左上にある状態になっています。この状態で、先ほど取得したel(hover時にマウスカーソルを表示させる領域)をmousemoveイベントの対象要素に設定すると、elにhoverした時に、ページの左上から急に移動して表示されることになります。

これだと少しダサいので、windowをmousemoveイベントの対象要素に設定することで、elにhoverせずとも常にマウスカーソルを追随するようになります。この後設定するmouseenter / mouseleaveが発火した時に、より自然にマウスカーソル要素が表示されるようになります。

const mouseEvent = function () {
  let el = document.querySelector(".box");
  let cursor = document.querySelector(".mouse");

  //mousemoveイベントの設定
  window.addEventListener("mousemove", function (e) {

  });
};

mouseEvent();

引数には「 e 」を設定し、eventオブジェクトを取得するように設定します。ここの引数名はなんでも大丈夫です。

マウスカーソル要素のwidth値を取得

次に、マウスカーソル要素のwidth値を取得していきます。width値の取得は「 getBoundingClientRect().width 」で取得します。
width値を取得する理由は、マウスカーソルをマウスカーソル要素の中央にくるようにするためです。

const mouseEvent = function () {
  let el = document.querySelector(".box");
  let cursor = document.querySelector(".mouse");

  window.addEventListener("mousemove", function (e) {
    //マウスカーソル要素のwidth値を取得
    let size = cursor.getBoundingClientRect().width;
  });
};

mouseEvent();

X座標、Y座標の取得

次に、イベントオブジェクトからマウスカーソルのX座標とY座標を取得します。取得方法は「 引数名.clientX (clientY) 」で取得します。そして先ほど取得したwidth値 / 2した値をマイナスします。

const mouseEvent = function () {
  let el = document.querySelector(".box");
  let cursor = document.querySelector(".mouse");

  window.addEventListener("mousemove", function (e) {
    let size = cursor.getBoundingClientRect().width;
    //X座標、Y座標の取得
    let X = e.clientX - (size / 2);
    let Y = e.clientY - (size / 2);
  });
};

mouseEvent();

styleの変更

X座標、Y座標の取得ができたら、マウスカーソル要素のX座標、Y座標をtransformを使って設定していきます。今回はtransformを使用していますが、top値、left値を変更しても問題ありません。

const mouseEvent = function () {
  let el = document.querySelector(".box");
  let cursor = document.querySelector(".mouse");

  window.addEventListener("mousemove", function (e) {
    let size = cursor.getBoundingClientRect().width;
    let X = e.clientX - (size / 2);
    let Y = e.clientY - (size / 2);
    //styleの変更
    cursor.style.transform = "translate(" + X + "px," + Y + "px)";
  });
};

mouseEvent();

mouseenterイベントとmouseleaveイベントの設定

最後に、mouseenterイベントとmouseleaveイベントを使用して、マウスカーソル要素のクラス名の付け替えを行います。
基本的にopacityでON/OFFを行っているだけなので、直接styleを操作しても問題ありません。

const mouseEvent = function () {
  let el = document.querySelector(".box");
  let cursor = document.querySelector(".mouse");

  window.addEventListener("mousemove", function (e) {
    let size = cursor.getBoundingClientRect().width;
    let X = e.clientX - (size / 2);
    let Y = e.clientY - (size / 2);
    cursor.style.transform = "translate(" + X + "px," + Y + "px)";
  });

  //mouseenterイベント
  el.addEventListener("mouseenter", function () {
    cursor.classList.add("show");
  });

  //mouseleaveイベント
  el.addEventListener("mouseleave", function () {
    cursor.classList.remove("show");
  });
};

mouseEvent();

以上で、実装終了です！

まとめ

今回の応用で、マウスカーソルの形状変化なども実装できると思うので、是非やって見てはいかがでしょうか。

では本日は以上になります。

オススメの教材