Блог

Я пытаюсь реализовать эффект наведения на ссылку на значок для компонента на сайте, созданном с использованием 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>
  

Описанное выше поведение связано с тем, что b-link поддерживает только событие @click, как указано в документах. Вы можете добиться функциональности, обернув b-ссылку в 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>