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.
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>
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>
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' : ''"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With