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>

```
I wanted to change z-index on hover so that hovered p tag appears at top. To do so I had to listen for event along with some value.

[![enter image description here](https://i.stack.imgur.com/reo9c.png)](https://i.stack.imgur.com/reo9c.png)[![enter image description here](https://i.stack.imgur.com/0QZPn.png)](https://i.stack.imgur.com/0QZPn.png)[![enter image description here](https://i.stack.imgur.com/fm5Lu.png)](https://i.stack.imgur.com/fm5Lu.png)

```
<template>
...
<p @mouseover="changeZIndex"
   @mouseleave="changeZIndexToOriginal({$event,old_z_index})
>
...
</template>

<script>
...methods
changeZIndex(e){
    //change to new z-index
    e.target.style.zIndex = 5 //to show on top
}
changeZIndexToOriginal(e){
    //e.$event is  an event which is trirgered. to get event along with some value we have to use this approach
    // e.old_z_index is z-index that I want to set back again. I am just using loop index to set z-index
    e.$event.target.style.zIndex = e.old_z_index
}
...
</script>

```

Using above approach we can change anything related to target element.