Hover

v-b-hover is a lightweight directive that allows you to react when an element either becomes hovered or unhovered.

Overview

The v-b-hover directive can be used as an alternative to using custom CSS to handle hover states.

• v-b-hover will call your callback method with a boolean value indicating if the element is hovered or not.
• The directive can be placed on almost any element or component.
• Internally, BootstrapVue uses this directive in several components.

Directive syntax and usage

<div v-b-hover="callback">content</div>

Where callback is required:

• A function reference that will be called whenever hover state changes. The callback is passed a single boolean argument. true indicates that the element (or component) is hovered by the users pointing device, or false if the element is not hovered.

The directive has no modifiers.

Usage example

<template>
  <div v-b-hover="hoverHandler"> ... </div>
</template>

<script>
  export default {
    methods: {
      hoverHandler(isHovered) {
        if (isHovered) {
          // Do something
        } else {
          // Do something else
        }
      }
    }
  }
</script>

Live example

In the following, we are swapping icons and text color depending on the hover state of the element:

<template>
  <div>
    <div v-b-hover="handleHover" class="border rounded py-3 px-4">
      <b-icon v-if="isHovered" icon="battery-full" scale="2"></b-icon>
      <b-icon v-else icon="battery" scale="2"></b-icon>
      <span class="ml-2" :class="isHovered ? 'text-danger' : ''">Hover this area</span>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isHovered: false
      }
    },
    methods: {
      handleHover(hovered) {
        this.isHovered = hovered
      }
    }
  }
</script>

<!-- b-v-hover-example.vue -->

Accessibility concerns

Hover state should not be used to convey special meaning, as screen reader users and keyboard only users typically can not trigger hover state on elements.