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
    },
  },
...
javascriptvue.jsvuejs2vue-componentnuxtjs

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Internet Explorer causing trouble with reliable Ajax dropdown selection

There are two drop-down lists on my website, where the options in one depend on the selection in the other. The Ajax code works perfectly fine in Chrome and Mozilla, but it's not functioning correctly in Internet Explorer (specifically IE9). I need so ...

javascriptajaxinternet-explorerdrop-down-menu

Working with Angular's forEach method and handling null values

I'm encountering an issue where the array of selected devices is not getting the values when attempting to add multiple devices to a group. Can someone identify the problem or suggest an alternative method? I referred to http://www.dotnetawesome.com/2 ...

javascriptarraysangularjsforeach

Is there a way to execute a node script via command line sans the need for installation and external packages?

Is there a way to execute a node script from the command line during development without actually installing anything, but still having access to installed packages using npm install <...>? When I try node ./bin/my_script.js, the script does not reco ...

javascriptnode.jsshellcommand-linenode-modules

Troubleshooting a ForwardRef issue in a TypeScript and React Native project

Encountering a ts error while using forwardRef. // [ts] Property 'forwardRef' does not exist on type 'typeof React'. const MyComponent = React.forwardRef((props: Props, ref: any) => ... An issue arises in React Native when the pare ...

javascripttypescriptreact-native

ChessboardJs: JavaScript Boards Function Properly on Initial Use Only

Update: The page code can be accessed via my page URL. I'm unsure where the issue lies. Your assistance is appreciated. Issue: Initially, when clicking on the chess puzzles page, everything works fine. However, upon re-clicking from the homepage, th ...

javascriptjqueryhtmlcss

Execute tests on changing files using cypress.io

I'm currently experimenting with using Cypress to test a large Angular application that I've developed. What I want to achieve is to load an expectation file into my test and then run the test based on this expectation file. Despite trying diffe ...

javascriptangularjstestingmocha.jscypress

When using Mongoose paginate, there is always one missing document

I currently have a database with 6 documents and the following route: router.get('', async (req, res) => { const search = req.query.search !=null ? req.query.search : ""; const page = req.query.page !=null ? req.query.page : 1; const limit = ...

javascriptnode.jsexpressmongoose

What are some solutions for resolving the npm error code elifecycle issue?

After following the documentation, I successfully installed React JS but encountered an error when trying to run the app. The error code displayed was elifecycle npm err errno 1. Can someone please assist me in resolving this issue? Additionally, it's ...

javascriptnode.jsreactjsnpmnpm-start

Manipulate the text within a canvas element using JavaScript

In this scenario, suppose json.mes represents the received message from Ajax. There is a button implemented to display the message in a canvas box. Although I have attempted to retrieve the message using getElementById (as shown below), it seems to be in ...

javascriptjqueryajaxcanvas

Ways to retrieve the state from the Redux store

While working on setting up the Redux store in my app.js file, I found myself populating it with data from the database. However, now I am faced with the task of obtaining the state of the store in a plain JavaScript file, not a React class. If I was work ...

javascriptreactjsreduxreact-reduxstates

Guide on dynamically loading email contacts options in selectize.js

I have been working with selectize.js to create an email contacts feature. However, I am facing an issue where the mail list retrieved from the database is displaying as undefined in selectize. Strangely, when I manually enter the return value, everything ...

javascriptjqueryasp.net-mvcselectize.js

AngularJS options for selecting items: radio buttons and checkboxes

I am currently working on creating a concatenated string based on the selection of radio buttons and checkboxes. There are two radio button groups and one checkbox group. One of the radio button groups is functioning correctly, but the other automatically ...

javascripthtmlangularjs

Ensuring typescript req.user in Passport JS is always defined: Best practices

When utilizing Passport JS, the req.user within the route is considered potentially undefined. However, the middleware prior to my route method ensures that this scenario does not occur. How can I convey this information to TypeScript? Object may be &apos ...

javascriptnode.jstypescriptexpresspassport.js

The concept of overloading operators in V8

Here's a question that I've been pondering, but couldn't seem to find any answers for on Google. While it may not be achievable in pure JavaScript, let's say I'm developing a container class in V8 and then returning that class bac ...

javascriptc++node.jsoperator-overloadingv8

Is there a way to verify the phone number input field on my registration form along with the country code using geolocation

I'm currently working on a registration form that includes an input field for telephone number. I'd like to implement a feature where, upon filling out the form, the telephone input field automatically displays the country code by default. Would ...

javascriptphphtmljquery

What is the best way to retrieve the value of a nested object within an object that has an integer property in JavaScript?

hello = [ { 0: { symbol: "asdf" , name:"adad"} }] In JavaScript, how can you access the symbol property in the 'hello' array? When you run console.log(hello[0]), it will output { symbol: "asdf" , name:"adad"}. However, if you try to access it u ...

javascriptreactjs

The error callback for Ajax is triggered even though the JSON response is valid

Within my JavaScript file, I am making the following call: $.ajax({ type: "POST", dataType: "application/json", url: "php/parseFunctions.php", data: {data:queryObj}, success: function(response) { ...

javascriptphpajaxjson

Running Handlebars using NodeJS can sometimes result in a "Cannot find module './parser'" error

After successfully creating and implementing a Handlebars template in the Browser, my next goal is to utilize the Handlebars precompiler, which requires a NodeJS module. I have already downloaded Handlebars for NodeJS along with all dependencies locally (n ...

javascriptnode.jshandlebars.jsnpm

What are the steps to transform my database object into the Material UI Table structure?

I have a MongoDB data array of objects stored in products. The material design format for creating data rows is as follows: const rows = [ createData('Rice', 305, 3.7, 67, 4.3), createData('Beans', 452, 25.0, 51, 4.9), createData ...

javascriptreactjsmaterial-ui

Executing JavaScript with Python in Selenium

Completely new to Selenium. I need help running a javascript snippet in this code (as commented), but struggling to do so. from selenium import webdriver import selenium from selenium.common.exceptions import NoSuchElementException from selenium.webdriver ...

javascriptpythonselenium