时间戳

首页 > 解决方案 > 鼠标悬停时仅显示当前卡片悬停效果

javascript - 鼠标悬停时仅显示当前卡片悬停效果

问题描述

鼠标悬停时仅显示当前卡片悬停效果。目前，如果我的鼠标移到卡片上，那么它会显示每张卡片的效果。

这在 Vue Nuxtjs 中怎么可能？

我试图实现的是这个。如果鼠标继续，它将开始播放 gif，如果鼠标熄灭，则显示静态图像。

我的代码：

<div v-b-hover="handleHover" class="team-img">
  <img
    v-if="isHovered"
    :srcset="member.node.teamMemberFields.imageGif"
  />
  <img v-else :srcset="member.node.teamMemberFields.image.srcSet" />
</div>

脚本代码：

import gql from 'graphql-tag'
export default {
  data() {
    return {
      isHovered: false,
    }
  },
  methods: {
    handleHover(hovered) {
      this.isHovered = hovered
    },
  },
...

标签： javascriptvue.jsvuejs2vue-componentnuxtjs

解决方案

使用 javascriptonmouseover和onmouseleave事件。
使用 Vue 语法，它可以写成v-on:mouseover或@mouseover.

<div @mouseover="isHovered = true" @mouseleave="isHovered = false" class="team-img">
  <img
    v-show="isHovered"
    :srcset="member.node.teamMemberFields.imageGif"
  />
  <img v-show="!isHovered" :srcset="member.node.teamMemberFields.image.srcSet" />
</div>

另外，我建议使用v-show而不是，v-if因为在这种情况下它的性能会更高，因为元素可能会在运行时多次显示/隐藏。

推荐阅读