Mouseover o hover vue.js

Me gustaría mostrar un div al desplazar un elemento en vue.js. Pero parece que puedo ponerme a trabajar.

Parece que no hay eventos para hover o mouseover i vue.js ¿puede ser verdad?

¿Sería posible combinar métodos jquery hover y vue?

Author: Anders Andersen, 2015-06-18
Source

8 answers

Aquí hay un ejemplo práctico de lo que creo que estás pidiendo.

Http://jsfiddle.net/JrodR87/1cekfnqw/3 / 

 <div id="demo">
        <div v-show="active">Show</div>
        <div v-on="mouseover: mouseOver">Hover over me!</div>
    </div>

var demo = new Vue({
    el: '#demo',
    data: {
        active: false
    },
    methods: {
        mouseOver: function(){
            this.active = !this.active;   
        }
    }
});
 27
Author: Jarrod,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-15 18:28:23

Me siento por encima de lógicas para hover es incorrecto. es inverso cuando el ratón se cierne. he utilizado el código debajo. parece funcionar perfectamente.

<div @mouseover="upHere = true" @mouseleave="upHere = false" >
    <h2> Something Something </h2>
    <some-component v-show="upHere"></some-component>
</div>

En la instancia de vue

data : {
    upHere : false
}

Esperanza que ayuda

 100
Author: shakee93,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-24 08:02:38

No hay necesidad de un método aquí.

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
  }
})
 64
Author: NICO,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-31 11:41:37

Para mostrar elementos secundarios o hermanos es posible solo con CSS. Si usa :hover antes de combinadores (+, ~, >, space). A continuación, el estilo se aplica no al elemento flotante.

HTML 

<body>
  <div class="trigger">
    Hover here.
  </div>
  <div class="hidden">
    This message shows up.
  </div>
</body>

CSS 

.hidden { display: none; }
.trigger:hover + .hidden { display: inline; }
 12
Author: qsc vgy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-24 13:17:36

Con mouseover solo el elemento permanece visible cuando mouse deja el elemento flotando, así que agregué esto:

@mouseover="active = !active" @mouseout="active = !active"

<script>
export default {
  data(){
   return {
     active: false
   }
 }
</script>
 4
Author: besthost,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-28 09:46:43

Se me ocurrió el mismo problema, ¡y lo soluciono !

        <img :src='book.images.small' v-on:mouseenter="hoverImg">
 1
Author: LittleStupid,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-11 11:41:39

Con los eventos mouseover y mouseleave puede definir una función toggle que implemente esta lógica y reaccione sobre el valor en el renderizado.

Mira este ejemplo: 

var vm = new Vue({
	el: '#app',
	data: {btn: 'primary'}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">


<div id='app'>
    <button
        @mouseover="btn='warning'"
        @mouseleave="btn='primary'"
        :class='"btn btn-block btn-"+btn'>
        {{ btn }}
    </button>
</div>
 1
Author: fitorec,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-03 05:05:56

Hay un JSFiddle que funciona correctamente: http://jsfiddle.net/1cekfnqw/176 / 

<p v-on:mouseover="mouseOver" v-bind:class="{on: active, 'off': !active}">Hover over me!</p>
 0
Author: funkvn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-03 11:04:08