How to Call a Function with Mouse Hover in VueJS ? Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report In Vue.js, the function can be triggered when the element is hovered using directives like @mouseover or @mousemove, allowing for dynamic interactions based on mouse movements. Table of Content Using @mouseover DirectiveUsing @mousemove DirectiveUsing @mouseover DirectiveIn this approach, we are using the @mouseover directive in Vue.js to trigger the mouseOverFn method when the mouse hovers over the specified element. The method sets a message and shows it for 1 second before hiding it when the mouse leaves the element. Syntax:<div @mouseover="methodName">...</div>Example: The below example uses @mouseover Directive to call a function with Mouse Hover in VueJS. HTML <!DOCTYPE html> <head> <title> Example 1 </title> <script src= "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script> <style> .styled-link { color: green; text-decoration: underline; cursor: pointer; } </style> </head> <body> <div id="app"> <h1> Using @mouseover Directive </h1> <div @mouseleave="mouseLeaveFn" @mouseover="mouseOverFn" class="styled-link"> Hover over me! </div> <p v-show="showMessage"> {{ message }} </p> </div> <script> new Vue({ el: '#app', data: { message: '', showMessage: false }, methods: { mouseOverFn() { if (!this.showMessage) { this.message = 'Hello GFG! Message from Function'; this.showMessage = true; setTimeout(() => { this.showMessage = false; }, 1000); } }, mouseLeaveFn() { this.showMessage = false; } } }); </script> </body> Output: Using @mousemove DirectiveIn this approach, we are using the @mousemove directive in Vue.js to trigger the handleMouseMove method when the mouse is moved over the specified element. The method sets a message and shows it for 1.5 seconds before hiding it when the mouse leaves the element. Syntax:<div @mousemove="methodName">...</div>Example: The below example uses @mousemove Directive to call a function with Mouse Hover in VueJS. HTML <!DOCTYPE html> <head> <title> Example 2 </title> <script src= "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script> <style> .styled-link { color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); text-decoration: underline; cursor: pointer; display: inline-block; padding: 5px; } </style> </head> <body> <div id="app"> <h1> Using @mousemove Directive </h1> <div @mouseleave="handleMouseLeave" @mousemove="handleMouseMove" class="styled-link"> Hover over me! </div> <p v-show="showMessage"> {{ message }} </p> </div> <script> new Vue({ el: '#app', data: { message: '', showMessage: false }, methods: { handleMouseMove(event) { if (!this.showMessage) { this.message = 'GFG is Great!'; this.showMessage = true; setTimeout(() => { this.showMessage = false; }, 1500); } }, handleMouseLeave() { this.showMessage = false; } } }); </script> </body> Output: Comment More infoAdvertise with us Next Article How to Monitor Changing Window Sizes in VueJS ? G gauravgandal Follow Improve Article Tags : JavaScript Web Technologies Vue.JS Similar Reads How to Call a Vue.js Function on Page Load ? In this article, we will learn how to call a vue.js function on page load in VueJS. We will explore two different approaches with practical implementation in terms of examples and outputs. Table of Content Using mounted HookUsing created HookUsing mounted HookIn this approach, are using the mounted 2 min read How to Call an Action From Within Another Action in VueJS ? In Vue.JS applications, we can call one action from within another as per the requirement for managing complex workflows. In this article, we will see the two different approaches with their practical implementation, through which we can perform this calling action. Table of ContentApproach 1: Using 3 min read How to Monitor Changing Window Sizes in VueJS ? Monitoring changing window sizes in a Vue.js application is crucial for creating responsive designs. Vue provides a few ways to achieve this, allowing you to dynamically respond to changes in the window dimensions. In this article, we will learn How to monitor changing window sizes in Vue.Two common 3 min read How to Monitor Changing Window Sizes in VueJS ? Monitoring changing window sizes in a Vue.js application is crucial for creating responsive designs. Vue provides a few ways to achieve this, allowing you to dynamically respond to changes in the window dimensions. In this article, we will learn How to monitor changing window sizes in Vue.Two common 3 min read How to Monitor Changing Window Sizes in VueJS ? Monitoring changing window sizes in a Vue.js application is crucial for creating responsive designs. Vue provides a few ways to achieve this, allowing you to dynamically respond to changes in the window dimensions. In this article, we will learn How to monitor changing window sizes in Vue.Two common 3 min read How to expand button with animation on hover using Vue.js ? In this article, we will create a simple button using HTML and CSS. After that we will add some vue.js code to make animated button on mouse hover. For making the button animation first we create a button. On which we are going to apply hovering. HTML Button Code: HTML <!DOCTYPE html> <ht 2 min read Like