How to Detect Mouse Hover in Vue

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.

Subscribe to Coding Beauty Newsletter

Gain useful insights and advance your web development knowledge with weekly tips and tutorials from Coding Beauty. Over 2,000 developers subscribe.

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>
Styling an element on mouse hover in Vue.

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>
Hover detection on a Vue component.

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.

11 Amazing New JavaScript Features in ES13

Sign up and receive a free copy immediately.


Leave a Comment

Your email address will not be published. Required fields are marked *