Pregunta Mouseover o hover vue.js


Me gustaría mostrar un div al colocar un elemento en vue.js. Pero puedo parecer que estoy trabajando.

Parece que no hay ningún evento para hover o mouseover i vue.js ¿puede ser verdad?

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


31
2018-06-18 09:45


origen


Respuestas:


Aquí hay un ejemplo de trabajo de lo que creo que está 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;   
        }
    }
});

26
2017-07-15 18:14



Siento que la lógica arriba para el vuelo estacionario es incorrecta. es solo inverso cuando el mouse se mueve. he usado el código a continuación. parece funcionar perfectamente bien

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

en instancia vue

data : {
    upHere : false
}

Espero que ayude


83
2017-10-24 08:02



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
  }
})

61
2018-01-31 11:41



Para mostrar elementos secundarios o hermanos, solo es posible con CSS. Si utiliza :hover antes de los combinadores (+, ~, >, space) Entonces el estilo se aplica no al elemento al pasar el ratón.

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; }

9
2018-03-24 13:17



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

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

<script>
export default {
  data(){
   return {
     active: false
   }
 }
</script>

4
2018-05-28 09:46



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

        <img :src='book.images.small' v-on:mouseenter="hoverImg">


1
2017-11-11 11:41



Con mouseover y mouseleave En los eventos puede definir una función de alternar que implemente esta lógica y reaccione sobre el valor en la representación.

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
2017-08-02 16:40