例えばボタンの役割を担うアイコンなど。

マウスオーバー(マウスカーソルが乗る)のタイミングで、色が変わってアクティブな感じに。

マウスアウト(マウスカーソルが外れる」)のタイミングで、元の色に戻るようにする。

 

↑このカメラのアイコンにマウスが重なった時だけ、アイコンを半透明にしたいときとか。

 

<template>
    <div class="icon">
        <label style="display:initial;">
            <font-awesome-icon 
            :class="activeStatus" 
            @mouseover="beActive"
            @mouseleave="beInActive" 
            class="child" 
            :icon="['fa', 'camera']" />
            <input type="file" class="form-control-file " ref="file"
                @change="fileSelected" accept=".jpg,.jpeg,.png,.gif"
                style="display:none">
        </label>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                activeStatus: 'inactive'
            }
        },
        methods: {
            beActive() {
                console.log('マウスオーバー')
                this.activeStatus = 'active'

            },
            beInActive() {
                console.log('マウス外れた')
                this.activeStatus = 'inactive'
            },
        }
</script>
<style scoped>
    .icon{
        color:white;
    }
    .inactive {
        /*何も書かなくていいかも*/
    }
    .active {
        opacity: 0.8;
    }
</style>

5行目から7行目にかけての:class="activeStatus" @mouseover="beActive" @mouseleave="beInActive" が今回のポイント。

マウスが乗ったら、beActiveというメソッドが発動

ハウスが外れたら、beInActiveというメソッドが発動

それにより、クラスが切り替わって見た目が変わる。

そんなかんじ。

 

booleanで切り替えるとかもっとスマートな方法があるかもしれないけど、まあいったんこれで動いた。

 

参考にしたサイト

【Vue.js】マウスオーバーとマウスリーブ|Into the Program

 

 

 

 

無制限に質問可能なプログラミングスクール!

万が一転職できない場合は、転職保障全額返金できるコースもあり!!

無制限のメンター質問対応

 

DMMウェブキャンプでプログラミングを学習しませんか?

独学より成長スピードをブーストさせましょう!

 

まずは無料相談から!

おすすめの記事