Question: I need to use CSS hover with VueJS v-bind:style directive but couldn't find information regarding it. 

I need to bind styles for hover but `v-bind:style.hover={}`
doesn't work. All the properties are going to be fetched from back-end, so I need to bind styles dynamically.

Are there other ways to bind styles on mouse over or CSS hover using VueJS?

Here is my code

This is the object :

```
button: {
    colorBackd: '#1e2021',
    colorBackdHover: '#000000',
    text: 'Results',
    color: '#d3e0ff',
    colorHover: "#ffffff",
    borderColor: '#d3e0ff',
    borderColorHover: "#ffffff"
},

```

Here is the html element that needs to be bound with styles

```
<button type="button"
    :style="{
    color:button.color,
        backgroundColor:button.colorBackd,
        borderColor:button.borderColor,
    }"
    class="btn btn-outline-info large-button">

        {{ button.text }}

</button>

```

Thanks

Answer: 
**Other way (using css variables).** 

You need create HTML with style 

```
<style>
     div[vueid=${_uid}] { --btn-hover: ${`Here your hover brush`} }
</style>

```

and inject it into your component. 

```
<template>
   <div vueid="_uid">
      <button></button>
      <div v-html="styleCode"></div>
   </div>
</template>

```

Then simply use this variable in static `css` file to setup button style.

```
button:hover { background: var(--btn-hover); }

```

Note: you can describe default variable value in `:root` selector.
After seeing this is not implemented in vue I decided to use an overlay, which adds up to using :style to the overlay that will be shown by changing the opacity.

It is basically:

```
<div id="test" :style="style">
  <div class="overlay" :style="style.hover"></div>
</div>

```

```js
var testArea = Vue.component('test-area', {
  template: '<div id="test" :style="style"><div class="overlay" :style="style.hover"></div></div>',
  computed: {
    style() {
      return {
        backgroundColor: '#0f0',
        hover: {
          backgroundColor: '#f00'
        }
      };
    },
  }
});

new Vue({
  el: '#app'
});
```

```css
#test {
  position: relative;
  width: 100px;
  height: 100px;
}

#test>.overlay {
  opacity: 0;
}

#test:hover>.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 1;
}
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <test-area></test-area>
</div>
```