It’s common to want to detect when the user hovers a UI element with the mouse. We can then customize the appearance of the element or display other elements when the mouse is over the element.
Styling an Element on Hover
With CSS, we could easily customize the appearance of an element on hover with the :hover pseudo-class:
.element {
background: blue;
}
.element:hover {
background: lightblue;
}This will change the background color of an element with the element class to lightblue when the user hovers over it.
But Vue doesn’t have built-in functionality for hover detection, so we’ll have to implement it ourselves by using a state variable and listening for certain events on the element.
To detect when the mouse has hovered over an element, we’ll listen for the mouseenter event. For detecting when the mouse stops hovering over the element, we’ll listen for the mouseleave event.
Note: While we could also listen for the mouseover event to detect hover, this event is triggered on an element and every single one of its ancestor elements in the DOM tree (i.e. it bubbles) and this could cause serious performance problems in deep hierarchies. mouseenter doesn’t bubble so we can use it without worrying about this.
We’ll use a variable to keep track of the element hover state:
<template>
<div
@mouseenter="hover = true"
@mouseleave="hover = false"
></div>
</template>
<script>
export default {
data() {
return {
hover: false,
};
},
};
</script>
We can then use this variable to conditionally add classes to the element to change the appearance on hover:
<template>
<div
@mouseenter="hover = true"
@mouseleave="hover = false"
class="div"
:class="{ 'div-hover': hover }"
></div>
</template>
<script>
export default {
data() {
return {
hover: false,
};
},
};
</script>
<style>
.div {
background-color: blue;
width: 200px;
height: 100px;
}
.div-hover {
background-color: yellow;
}
</style>
Displaying Other Elements on Hover
We can also display other elements when mouse hover is detected. For example, we could show a tooltip to display more information about the element.
We can display another element on hover by passing the state variable to a v-if directive attached to the element:
<template>
<button
@mouseenter="hover = true"
@mouseleave="hover = false"
class="div"
:class="{ 'div-hover': hover }"
>
Button
</button>
<p v-if="hover">Tooltip</p>
</template>
<script>
export default {
data() {
return {
hover: false,
};
},
};
</script>
Detecting Hover on a Vue component
We can also use the mouseenter and mouseleave approach to detect hover on a custom Vue component.
components/StylesButton.vue
<template>
<div>
<button>Styled button</button>
</div>
</template>
<style>
button {
height: 30px;
width: 100px;
background-color: lightgreen;
}
</style>
App.vue
<template>
<styled-button
@mouseenter="hover = true"
@mouseleave="hover = false"
></styled-button>
<p v-if="hover">Tooltip</p>
</template>
<script>
import StyledButton from './components/StyledButton.vue';
export default {
components: {
StyledButton,
},
data() {
return {
hover: false,
};
},
};
</script>
Note: If you’re using Vue 2.x, you’ll need to use the .native event modifer to listen for native DOM events on the Vue component:
<styled-button
@mouseenter.native="hover = true"
@mouseleave.native="hover = false"
></styled-button>Conclusion
While Vue doesn’t have built-in support for hover detection, we can implement it ourselves by listening for the mouseenter and mouseleave events and changing the value of a boolean state variable in the handlers for these events.
11 Amazing New JavaScript Features in ES13
This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.
Ayibatari Ibaba is a software developer with years of experience building websites and apps. He has written extensively on a wide range of programming topics and has created dozens of apps and open-source libraries.
