Display the hover effect for the current card when the mouse is over it

Question

Display the hover effect for the current card when the mouse is over it

When the mouse hovers over a card, I want only that specific card to show a hover effect. Currently, when I hover over any card, all of them show the hover effect.

Is there a way to achieve this in Vue Nuxtjs?

Here's what I am trying to accomplish: When the mouse hovers over a card, it should play a GIF, and when the mouse moves away, it should display a static image.

This is my code:

<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>

And here is the script code:

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

javascript vue.js vuejs2 vue-component nuxtjs

Answer 1

Answer №1

To implement interactive features, utilize the JavaScript events onmouseover and onmouseleave. In Vue syntax, you can achieve this with v-on:mouseover or @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>

For better performance, consider using v-show instead of v-if when displaying/hiding elements multiple times during runtime.

Answer 2

To implement interactive features, utilize the JavaScript events onmouseover and onmouseleave. In Vue syntax, you can achieve this with v-on:mouseover or @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>

For better performance, consider using v-show instead of v-if when displaying/hiding elements multiple times during runtime.

Answer 3

Answer №2

To modify the appearance of the currently hovered item, you can utilize the index from v-for. In this instance, only the color of the item being hovered over will change to red.

<template>
  <template v-for="(item, index) in items" :key="item">
    <h3
      @mouseover="{ isHovered = true; indexHover = index; }"
      @mouseleave="isHovered = false"
      :style="isHovered && indexHover == index ? 'color:red' : ''"
    >
      {{ item }}
    </h3>
  </template>
</template>

<script>
export default {
  name: 'home',
  data() {
    return {
      items: ['item1', 'item2', 'item3'],
      isHovered: false,
      indexHover: null,
    };
  },
}
</script>

Answer 4

To modify the appearance of the currently hovered item, you can utilize the index from v-for. In this instance, only the color of the item being hovered over will change to red.

<template>
  <template v-for="(item, index) in items" :key="item">
    <h3
      @mouseover="{ isHovered = true; indexHover = index; }"
      @mouseleave="isHovered = false"
      :style="isHovered && indexHover == index ? 'color:red' : ''"
    >
      {{ item }}
    </h3>
  </template>
</template>

<script>
export default {
  name: 'home',
  data() {
    return {
      items: ['item1', 'item2', 'item3'],
      isHovered: false,
      indexHover: null,
    };
  },
}
</script>

Display the hover effect for the current card when the mouse is over it

Answer №1

Answer №2

Similar questions

AJAX - Alert with a beep sound each time a new entry is inserted into the database table

Using Flask and AngularJS: Managing Scope in a Controller with Flask Templating

Troubleshooting error in WordPress: Changing innerHTML of dynamically created divs using JavaScript. Issue: 'Unable to set property innerHTMl of null'

What is the best way to delete HTML classes that were generated by a function?

Transfer the imageURI to a different HTML page

Vue Js image loading issue

Launching a centered pop-up window to display a submitted form message

Creating a carousel in AngularJS using ng-repeat without resorting to jQuery

Issue with Firefox causing problems with smooth scrolling Javascript on internal links

Connecting CSS and JS files in JSP was a bit of a challenge

Verify ownership information by utilizing Node.js

Coding in PHP, JavaScript, and HTML allows builders

When a button is clicked, retrieve information from a server using Node.js

What is the proper way to structure the DATETIME format when making an API request to mySQL?

What steps should I take to set up search paths for node modules in Code Runner within Visual Studio Code?

Is there a way to continue a failed fetch request?

Child Component Unable to Access Vue Props

I often find that jscodeshift consistently avoids processing my JavaScript files

Ways to transform a PHP function into one that can be invoked using Ajax

Will asynchronous functions continue running when a route changes in a Vue.js application?