How to Call a Function with Mouse Hover in VueJS ?
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 Directive
- Using @mousemove Directive
Using @mouseover Directive
In 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.
<!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 Directive
In 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.
<!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:
Contact Us