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

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:

var testArea = Vue.component('test-area', {
  template: '
',
  computed: {
    style() {
      return {
        backgroundColor: '#0f0',
        hover: {
          backgroundColor: '#f00'
        }
      };
    },
  }
});

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

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

#test>.overlay {
  opacity: 0;
}

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