Mouseover или hover vue.js

Я хотел бы показать div при наведении указателя мыши на элемент в vue.js. Но я не могу заставить его работать.

Похоже, что в vue.js. нет события hover или mouseover. Это правда?

Можно ли объединить методы jquery hover и vue?

Ответ 1

Вот рабочий пример того, о чем я думаю, вы просите.

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

Ответ 2

я чувствую, что логика для зависания неверна. он просто инвертируется при наведении мыши. Я использовал ниже код. он работает нормально.

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

на экземпляре vue

data : {
    upHere : false
}

надеюсь, это поможет

Ответ 3

Здесь нет необходимости в методе.

HTML

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

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

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

Ответ 4

Чтобы показать дочерние или дочерние элементы, это возможно только с помощью CSS. Если вы используете :hover перед комбинаторами (+, ~, >, space). Тогда стиль применяется не к зависающему элементу.

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

Ответ 5

С событиями mouseover и mouseleave вы можете определить функцию переключения, которая реализует эту логику и реагирует на значение в рендеринге.

Проверьте этот пример:

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

С помощью mouseover только элемент остается видимым, когда мышь покидает парящий элемент, поэтому я добавил следующее:

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

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

Ответ 7

Можно переключать класс при наведении курсора строго в шаблоне компонента, однако это не практичное решение по понятным причинам. Для прототипирования, с другой стороны, я считаю полезным не определять свойства данных или обработчики событий в скрипте.

Вот пример того, как вы можете экспериментировать с цветами значков, используя 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>

Ответ 8

Я столкнулся с той же проблемой, и я проработает!

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

Ответ 9

Существует правильный рабочий JSFiddle: http://jsfiddle.net/1cekfnqw/176/

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

Ответ 10

<div @mouseover="activarOver" @mouseleave="resetOver "> eventos </div>



data: () => {
    return {
      countMouseOver: 0
    }
  },
methods: {
    activarOver () {
      this.countMouseOver++
      if (this.countMouseOver < 2) {
        this.setMostrarPopup()
      }
      console.log(this.countMouseOver)
    },
    resetOver () {
      this.countMouseOver = 0
      console.log('reset')
    },
}