Question

我正在尝试在Bootstrap 4中使用Nuxt.js构建的站点中，在组件的图标链接上实现悬停效果。我尝试使用@ 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仅支持docs中所述的@click事件。您可以通过将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>

如何在Nuxt.js中的图标链接上正确实现悬停效果

1 个答案: