Search code examples
javascriptvue.jshovermouseover

Mouseover or hover vue.js

I would like to show a div when hovering over an element in vue.js. But I can't seem to get it working.

It looks like there is no event for hover or mouseover in vue.js. Is this really true?

Would it be possible to combine jquery hover and vue methods?

Solution

  • There's no need for a method here.

    HTML

    <div v-if="active">
    <h2>Hello World!</h2>
 </div>

 <div v-on:mouseover="active = !active">
    <h1>Hover me!</h1>
 </div>

    JS

    new Vue({
  el: 'body',
  data: {
    active: false
  }
})