Mouse Hover in VueJS component implementation in Laravel
Try adding these to prevent default event and propagation
v-on:mouseover.prevent.stop="mouseover"v-on:mouseleave.prevent.stop="mouseleave"
The code works, When i run on my system it works.
I tried it on JSFiddle.
//html<div id="mouse" class="mouse1"> <a v-on:mouseover="mouseover" v-on:mouseleave="mouseleave"> {{name}} </a></div>//CSS#mouse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 280px; height: 50px; margin: 0 auto; line-height: 50px; text-align: center; color: #fff; background: #007db9; }//js new Vue({ el: "#mouse", data: { name: 'Hover Me!', showAudience: false, }, methods : { mouseover: function(){ this.name = 'Good!' }, mouseleave: function(){ this.name = 'Hover Me!' } }, mounted(){ } })
Neat. Looks like as the button changes size during the animation, the mouse goes in and out of hover state because the edge is moving.
I added a div around each button, and attached the hover triggers to the divs instead of the buttons
<body> <div id="app"> <h1>Hover the mouse near the border</h1> <hr> <div @mouseover="hoverOver" @mouseout="hoverOut"> <button :class="classes">IMMEDIATE</button> </div> <br><br><br> <div @mouseover="hoverOver" @mouseout="hoverOutTimeout"> <button :class="classes">WAIT JUST A BIT </button> </div> </div>