How to Detect Mouse Hovers in Vue.js

Vuejs Tip: Detect Mouse Hovers

John Philip

Published in

Level Up Coding

2 min read17 hours ago

Introduction

Mouse hover events are a fundamental part of web development, providing interactivity and enhancing user experiences. In this guide, we’ll explore how to detect mouse hovers in Vue.js and implement practical example to illustrate the approach.

Detect Mouse Hover with Built-in Directives

To detect mouse hover events in Vue.js, you can use the @mouseenter and @mouseleave event listeners. These listeners allow you to execute methods or code when the mouse enters or leaves an element. Here’s an example of how you can use these event listeners:

<script setup>
import { ref } from 'vue';

const isHovered = ref(false);

const handleMouseEnter = () => {
 // Set isHovered to true when the mouse enters the element
 isHovered.value = true;
};

const handleMouseLeave = () => {
 // Set isHovered to false when the mouse leaves the element
 isHovered.value = false;
};
</script>
<template>
 <div>
 <!-- Bind the mouseenter and mouseleave event listeners -->
 <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
 Hover over me!
 </div>

 <!-- Display a message based on the hover state -->
 <p v-if="isHovered">Mouse is hovering.</p>
 <p v-else>Mouse is not hovering.</p>
 </div>
</template>

In this example:

We have a div element with @mouseenter and @mouseleave event listeners bound to it.
When the mouse enters the div, the handleMouseEnter method is called, which sets the isHovered data property to true.
When the mouse leaves the div, the handleMouseLeave method is called, which sets the isHovered data property to false.
In the template, we conditionally display a message based on the isHovered data property to indicate whether the mouse is hovering over the element or not.

This is a basic example of how to detect mouse hover events in Vue.js. You can adapt and expand upon this pattern to suit your specific use case and needs.

Experiment with the code on Vue.js Playground.

Resources

Event Handling