Dynamically add and remove classes on mouseover - Vue.js

Question

I can successfully add a class on mouseover with Vue. But I want to remove the class when the mouse leaves the element. What is the idiomatic way of handling this in Vue?

<template>
  <div id="navigation">
    <div class="nav-container">
      <nav>
        <router-link to="/" class="home">Ping Party</router-link>
        <div class="navigation-actions">
          <router-link to="/sign_in" v-if="!isLoggedIn" class="sign_in">Sign In</router-link>
          <router-link to="/sign_up" v-if="!isLoggedIn" @mouseover.native="mouseOver" class="sign_up" ref="sign_up">Sign Up</router-link>
          <router-link to="/users" v-if="isLoggedIn" class="users">Users</router-link>
          <v-btn :click.prevent="signOut()" v-if="isLoggedIn">Sign Out</v-btn>
        </div>
      </nav>
    </div>
  </div>
</template>

<script>
  import SignUp from "../forms/SignUp";
  import SignIn from "../forms/SignIn";

  export default {
    components: {
      SignUp,
      SignIn
    },
    computed: {
      isLoggedIn () {
        return this.$store.getters.isLoggedIn
      }
    },
    methods: {
      signOut: function() {
        this.$store.commit("LOGOUT")
        this.$store.commit("FLASH_MESSAGE", {
          message: "Signed Out Successfully",
          show: true,
          styleClass: "error",
          timeOut: 4000
        })
        this.$router.push('/')
      },
      mouseOver: function() {
        this.$refs.sign_up.$vnode.elm.classList.add("hovered")
      }
    }
  }
</script>

As you can see on mouseover I call the mouseOver function and this successfully adds the class to the element. But now when the users leaves the element the class remains. How can I have the class remove when the user leaves the element? Thanks for the help.

Bert · Accepted Answer · 2018-02-20 18:55:00Z

31

Listen for both mouseover and mouseout and set the class based on that.

console.clear()

new Vue({
  el: "#app",
  data:{
    isHovering: false
  }
})

.hovering{
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <h1 @mouseover="isHovering = true" 
      @mouseout="isHovering = false" 
      :class="{hovering: isHovering}">
    {{ isHovering ? "Woot! Hovered" : "Hover over me" }}
  </h1>
</div>

Or just use CSS.

console.clear()

new Vue({
  el: "#app",
  data:{
    isHovering: false
  }
})

h1:hover{
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <h1 @mouseover="isHovering = true" 
      @mouseout="isHovering = false" >
    {{ isHovering ? "Woot! Hovered" : "Hover over me" }}
  </h1>
</div>

edited Feb 20, 2018 at 18:55

answered Feb 20, 2018 at 18:49

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Bill Criswell Over a year ago

But please keep in mind there's a :hover in CSS OP. This is completely overkill. So .sign_up:hover { color: red; } will give you the same result much more cleanly.

Bert Over a year ago

@BillCriswell Yeah... That would make too much sense :)

Bitwise Over a year ago

Yea, That does make sense. I'm just trying to grok how to do things like this in Vue. But, yes this could be done a lot easier.

Yann Over a year ago

Another proof how powerful CSS is these days!

Astravagrant Over a year ago

While @BillCriswell's comment is valid, there is an important use case for this manual approach: css animations. The spec didn't include a reset function, so there's no 'un-hover' event, and animations can't be restarted without applying and removing a class (at least, not with full control). This method above is a good way of doing it, when you need exit-animations.

|

Achilles Moraites · Accepted Answer · 2019-09-10 09:16:26Z

15

A more scalable solution would be to use a directive:

// Directives
Vue.directive('add-class-hover', {
  bind(el, binding, vnode) {    
    const { value="" } = binding;
    el.addEventListener('mouseenter',()=> {
        el.classList.add(value)
    });
    el.addEventListener('mouseleave',()=> {
        el.classList.remove(value)
    });
  },
  unbind(el, binding, vnode) {
    el.removeEventListener('mouseenter');
    el.removeEventListener('mouseleave')
  }
})

new Vue({
  el: "#app"
})

.hoverClass {
color: red;
font-weight: 700;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h1 v-add-class-hover="'hoverClass'">
    Text
  </h1>
</div>

answered Sep 10, 2019 at 9:16

Achilles Moraites

3143 silver badges8 bronze badges

3 Comments

icosmin Over a year ago

Thanks for this nice solution. For unbind, remove event listener require a listener as second parameter: developer.mozilla.org/en-US/docs/Web/API/EventTarget/…

icosmin Over a year ago

In the end my solution was to call the method again at unbind: ``` unbind(el, binding, vnode) { el.removeEventListener('mouseenter', ()=> { el.classList.add(value) }); el.removeEventListener('mouseleave', ()=> { el.classList.remove(value) }) } ``` Perhaps this is still not the best because it's still an anonymous function see: dev.to/em4nl/…

RollingInTheDeep Over a year ago

Its great to see different kinds of solution on stackovervlow, but from what I have been taught, its bad practice to mix vuejs and dom manipulation like this. Since vuejs takes its own copy of the dom, it means you can run into issues with these sort of solutions.

Artur Müller Romanov · Accepted Answer · 2022-06-30 19:58:15Z

2

In case someone is looking for something that actually works with v-for, use this:

<div v-for="(item, index) in [1,2,3,4,5,6,7,8]" @mouseenter="state.hover=index" @mouseleave="state.hover=false">
  <p :class="{ 'yourClass': state.hover == index }">Hello World</p>
</div>

The above answers will trigger all of your elements inside a v-for loop at the same time.

answered Jun 30, 2022 at 19:58

Artur Müller Romanov

6,17323 gold badges117 silver badges197 bronze badges

Comments

Amina Darwish · Accepted Answer · 2021-10-24 05:31:28Z

1

Add the following to the div you want to animate on hover :

@mouseover="isHovering = item.id" @mouseout="isHovering = false" :class="isHovering == item.id ? 'slower animated pulse' : ''"

answered Oct 24, 2021 at 5:31

Amina Darwish

111 bronze badge

Collectives™ on Stack Overflow

Dynamically add and remove classes on mouseover - Vue.js

4 Answers 4

6 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related