VueJS - v-bind:style + hover

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=

Answer 1

Other way (using css variables).

You need create HTML with style

and inject it into your component.

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.