Как правильно реализовать эффект наведения на значок ссылки в Nuxt.js

Question

Я пытаюсь реализовать эффект наведения на ссылку значка для компонента на сайте, созданном с использованием Nuxt.js с Bootstrap 4. Я пытался использовать события @ mouseover / @ mouseenter и @mouseleave для переключения srcатрибут от одного изображения значка к другому, но это не вызывает изменения, если ссылка на значок не нажата.Это как-то связано с фокусом?Есть ли лучший способ получить эффект, который я хочу?Компонент ниже.

<template>
    <b-row class="main-focus px-3 pt-3">
        <b-col md="12" class="mb-4">
            <h1 class="clr-t mb-4 px-2 pb-1 clr-brdr-btm">resume</h1>
            <p class="drk-t pl-2">{{description[0].text}}</p>
            <b-link 
                @mouseover="icon = 'assets/images/icons/resume-icon-clicked.svg'"
                @mouseleave="icon = 'assets/images/icons/resume-icon.svg'"
                :href="resume.url" 
                target="_blank"
            >
                <b-img 
                    class="icon bg-lt" 
                    v-bind="iconProps" 
                    rounded 
                    :src="icon"/>
            </b-link>
        </b-col>
    </b-row>
</template>
<script>
    export default {
        props: {
            description: Array,
            resume: Object
        },
        data () {
            return {
                icon: 'assets/images/icons/resume-icon.svg',
                iconProps: { width: 100 }
            }
        }
    }

</script>

Answer 1

Вышеуказанное поведение связано с тем, что b-link поддерживает только событие @click, как указано в docs . Вы можете достичь функциональности, поместив b-link в элемент div, как показано ниже.

    <div @mouseover="icon = 'assets/images/icons/resume-icon-clicked.svg'"
@mouseleave="icon = 'assets/images/icons/resume-icon.svg'">
    <b-link 
    :href="resume.url" 
    target="_blank"
    >
    <b-img 
    class="icon bg-lt" 
    v-bind="iconProps" 
    rounded 
    :src="icon"/>
    </b-link>
</div>