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.
I'm using vue3 with composition api and decided there's 2 good ways to do this. You can use a slot and variable like so:

```
<MenuItem v-slot="{ active }">
  <a href="#" :class="[active ? 'bg-neutral-600' : '', text-sm']">File</a>
</MenuItem>

```

Or you can use any template variables in the CSS section with v-bind() like so:

```
<template>
  <MenuItem class="menuClass">File</MenuItem>
</template>

<script>
export default {
  ...
  setup() {
    return {
      myObject,
    };
  },
};
</script>

<style>
.menuClass:hover {
  background-color: v-bind("myObject.hoverColor");
}
</style>

```