web-dev-qa-db-fra.com

Passez la souris ou survolez vue.js

Je voudrais montrer un div lors du survol d'un élément dans vue.js. Mais je peux sembler me faire travailler. 

On dirait qu’il n’ya pas d’événement pour le survol ou le survol de la souris i vue.js, est-ce vraiment vrai? 

Serait-il possible de combiner les méthodes jquery hover et vue? 

javascriptvue.js
47
Anders Andersen

Voici un exemple concret de ce que vous demandez, je pense.

http://jsfiddle.net/1cekfnqw/3017/

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

var demo = new Vue({
    el: '#demo',
    data: {
        active: false
    },
    methods: {
        mouseOver: function(){
            this.active = !this.active;   
        }
    }
});
42
Jarrod

je pense que la logique ci-dessus pour le vol stationnaire est incorrecte. il suffit d'inverser lorsque la souris survole. J'ai utilisé le code ci-dessous. cela semble fonctionner parfaitement bien.

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

on vue instance

data : {
    upHere : false
}

J'espère que cela pourra aider

120
shakee93

Il n'y a pas besoin d'une méthode ici.

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

Montrer des éléments enfant ou frères est possible avec CSS uniquement. Si vous utilisez :hover avant les combinateurs (+, ~, >, space). Ensuite, le style ne s'applique pas à l'élément survolé.

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; }
21
qsc vgy

Avec les événements mouseover et mouseleave, vous pouvez définir une fonction de basculement qui implémente cette logique et réagit à la valeur du rendu.

Vérifiez cet exemple:

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>

6
fitorec

Avec mouseover, seul l'élément reste visible lorsque la souris quitte l'élément survolé. J'ai donc ajouté ceci:

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

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

Je suis venu avec le même problème, et je résous le problème!

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

2
LittleStupid

JSFiddle fonctionne correctement: http://jsfiddle.net/1cekfnqw/176/

<p v-on:mouseover="mouseOver" v-bind:class="{on: active, 'off': !active}">Hover over me!</p>
1
funkvn

Il est possible de basculer une classe en survol strictement dans le modèle d'un composant, mais ce n'est pas une solution pratique pour des raisons évidentes. Pour le prototypage en revanche, je trouve utile de ne pas avoir à définir des propriétés de données ou des gestionnaires d’événements dans le script.

Voici un exemple de la façon dont vous pouvez expérimenter les couleurs d’icônes avec Vuetify.

new Vue({
  el: '#app'
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-toolbar color="black" dark>
      <v-toolbar-items>
        <v-btn icon>
          <v-icon @mouseenter="e => e.target.classList.toggle('pink--text')" @mouseleave="e => e.target.classList.toggle('pink--text')">delete</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon @mouseenter="e => e.target.classList.toggle('blue--text')" @mouseleave="e => e.target.classList.toggle('blue--text')">launch</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon @mouseenter="e => e.target.classList.toggle('green--text')" @mouseleave="e => e.target.classList.toggle('green--text')">check</v-icon>
        </v-btn>
      </v-toolbar-items>
    </v-toolbar>
  </v-app>
</div>

0
DigitalDrifter