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: 
You can assign your Vuejs Component an id and apply the required hover style in a stylesheet.

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

    {{ button.text }}
</button>

```

then in tag,

```
<style>
styledButton:hover {
color: #FFFFFF
};
</style>

```

If you want the hover style to contain any dynamic data. make a tag that calls a computed property.

```
<style>{{computedStyle}}</style>

```
If you use single file components, then you just need to make the button style scoped:

```
<template>
    <button></button>
</template>

<style scoped>
    button {
        /* your button style here */
    }
</style>

```

Or even for a more confined styling there are modules, shown here: [How to correctly use "scoped" styles in VueJS single file components?](https://stackoverflow.com/questions/45898865/how-to-correctly-use-scoped-styles-in-vuejs-single-file-components)