【Vue.js】マウスオーバーとマウスリーブ

こんにちは、Ryohei（@ityryohei）です！

本記事では、Vue.jsでマウスオーバーとマウスリーブイベントの取得方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

マウスオーバーとマウスリーブについて

そもそもマウスオーバーって何だろう？ という方もいらっしゃるかと思いますので、簡単に概要を説明します。

マウスオーバーとは、パソコンの操作する際に特定の要素（ボタンや画像等）にマウスカーソルを重ねた際に何らかの処理を行うことを指します。よくマウスカーソルを重ねると画像が切り替わるボタンをウェブサイトで見かけるかと思いますが、あれはマウスカーソルを合わせた場合に画像のon、offをマウスオーバーの処理で切り替えています。JavascriptやjQueryで実装されていることが多いですが、CSSでは標準でhoverという擬似クラスが用意されていますね。

マウスオーバーがマウスカーソルを重ねた際に何らかの行うのに対して、重ねたマウスカーソルが離れた場合に何らかの処理を行うことをマウスリーブと言います。マウスオーバーで切り替えた画像を元の画像に戻してあげる場合にマウスリーブで処理を実装します。基本的に、マウスオーバーとマウスリーブはセットで記述することが多くなるかと思います。

マウスオーバーとマウスリーブについてご理解いただけたかと思いますので、本題に戻りましょう！

マウスオーバー（mouseover）

下記はマウスオーバーの処理になります。マウスオーバーした際にmessageの値が更新されます。

HTML

<div id="mouseover">
    <a v-on:mouseover="mouseover">
        {{message}}
    </a>
</div>

Vue.js

new Vue({
    el: "#mouseover",
    data: {
        message: "Hover Me!"
    },
    methods: {
        mouseover: function () {
            this.message = "Good!";
        }
    }
});

DEMO

See the Pen Vue.js | Mouseover by ryohei (@intotheprogram) on CodePen.

マウスリーブ（mouseleave）

下記はマウスリーブの処理になります。指定した要素からマウスカーソルが離れると、messageの値が更新されます。

HTML

<div id="mouseleave">
    <a v-on:mouseleave="mouseleave">
        {{message}}
    </a>
</div>

Vue.js

new Vue({
    el: "#mouseleave",
    data: {
        message: "Hover Me!"
    },
    methods: {
        mouseleave: function () {
            this.message = "Good!";
        }
    }
});

DEMO

See the Pen Vue.js | Mouseleave by ryohei (@intotheprogram) on CodePen.

マウスオーバーとマウスリーブ

下記はマウスオーバーとマウスリーブの処理になります。マウスオーバー、マウスリーブした際にmessageの値が更新されます。

HTML

<div id="mouse">
    <a v-on:mouseover="mouseover" v-on:mouseleave="mouseleave">
        {{message}}
    </a>
</div>

Vue.js

new Vue({
    el: "#mouse",
    data: {
        message: "Hover Me!"
    },
    methods: {
        mouseover: function () {
            this.message = "Good!";
        },
        mouseleave: function () {
            this.message = "Hover Me!";
        }
    }
});

DEMO

See the Pen Vue.js | Mouseover & Mouseleave by ryohei (@intotheprogram) on CodePen.

マウスオーバーとマウスリーブの処理は利用する機会が多い処理になりますので、どこかでご活用いただければ幸いです！

以上、Vue.jsでマウスオーバーとマウスリーブのイベントを取得する方法のご紹介でした！