vue-hover's Introduction

Vue Hover

Add hover styles to an HTML element dynamically with a Vue directive.

Installation

Intall via NPM

npm install vue-hover

Usage

Install the plugin

import Vue from 'vue'
import VueHover from 'vue-hover'

Vue.use(VueHover)

Once your plugin is intalled a new directive v-hover is available to use on a HTML element, the usage is the same object syntax that is used when binding inline styles on Vue with the properties on camelCase.

<template>
  <div>
    <button
      :style="baseStyles"
      v-hover="{ backgroundColor: hoverBackground }"
    >
      Hover Me!
    </button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      hoverBackground: '#667EEA',
      baseStyles: {
        backgroundColor: '#5A67D8'
      }
    }
  }
}
</script>

To override an !important from a class a modifier can be added v-hover.important and this will add !important to all the inline styles.

<template>
  <div>
    <button
      class="my-background"
      v-hover.important="hoverStyles"
    >
      Hover Me!
    </button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      hoverStyles: {
        backgroundColor: '#667EEA'
      }
    }
  }
}
</script>
<style>
  .my-background {
    background-color: #ff0000 !important;
  }
</style>