При наведении курсора или при наведении вю.JS

При наведении курсора или при наведении вю.JS

18.06.2015 12:45:00 Просмотров 187 Источник

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

Похоже, что в vue нет события для наведения или наведения курсора мыши.JS. Неужели это действительно так?

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

javascript vue.js
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/30911933/mouseover-or-hover-vue-js#comment49943523_30911933
в директиве работает на "овер" событие. Если вы добавите к своему вопросу написанный вами код, мы, вероятно, сможем помочь вам заставить его работать. И да, Vue прост и мал и предназначен для интеграции с другими пакетами, такими как jQuery.

Ответы - При наведении курсора или при наведении вю.JS / Mouseover or hover vue.js

Является ответом!
Jarrod

15.07.2015 09:14:41

Вот рабочий пример того, о чем, как мне кажется, вы просите.

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;   
        }
    }
});
Источник
https://stackoverflow.com/questions/30911933/mouseover-or-hover-vue-js/31438048#comment64995795_31438048
не работает с новейшей версией vue. @CYB попытался отредактировать ваш ответ на v-on:mouseover="mouseOver", но не упомянул, в какой версии vue изменился синтаксис
https://stackoverflow.com/questions/30911933/mouseover-or-hover-vue-js/31438048#comment65032673_31438048
@NICO имеет лучшее решение, чем мое, и работает с текущей версией (1.0.26 на момент этого поста). Пожалуйста, обратитесь к его ответу. Спасибо.
https://stackoverflow.com/questions/30911933/mouseover-or-hover-vue-js/31438048#comment65032816_31438048
Я хотел бы удалить это, так как я только что заявил, что сообщение ниже от @NICO лучше, чем мое, и более актуально. Пожалуйста, дайте Нико правильный ответ, и я удалю свой. Спасибо!
https://stackoverflow.com/questions/30911933/mouseover-or-hover-vue-js/31438048#comment77712659_31438048
пример сломан?
https://stackoverflow.com/questions/30911933/mouseover-or-hover-vue-js/31438048#comment78587500_31438048
я думаю, что лучше использовать короткую руку @mouseover:mouseover
NICO

31.01.2016 02:41:37

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

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
  }
})
Источник
https://stackoverflow.com/questions/30911933/mouseover-or-hover-vue-js/35113419#comment65735230_35113419
Можно использовать v-on:mouseover или контекстное @mouseover на документы vuejs.org/guide/syntax.html#v-on-Shorthand
https://stackoverflow.com/questions/30911933/mouseover-or-hover-vue-js/35113419#comment65735315_35113419
Вы можете заменить onна v-on:или @для любого из атрибутов события html. w3schools.com/tags/ref_eventattributes.asp
https://stackoverflow.com/questions/30911933/mouseover-or-hover-vue-js/35113419#comment65735474_35113419
А в чем проблема? Этот вариант работает и должен быть отмечен как правильный ответ.
https://stackoverflow.com/questions/30911933/mouseover-or-hover-vue-js/35113419#comment73198140_35113419
Вю 2.2.0 не нравится - плюнь предупреждение "[вю предупредить]: не устанавливайте Вуе в <html> или <body> - крепление на нормальные элементы, а не. "
https://stackoverflow.com/questions/30911933/mouseover-or-hover-vue-js/35113419#comment73215926_35113419
Для простоты я сделал < body> экземпляром vue. Конечно, вы не должны делать этого в своем реальном приложении.
qsc vgy

24.03.2016 04:17:36

Показать дочерние или родственные элементы можно только с помощью 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; }
Источник
https://stackoverflow.com/questions/30911933/mouseover-or-hover-vue-js/36201164#comment65731537_36201164
Вопрос конкретно спрашивает о Vue.JS. Так как это позволяет javascript легко привязываться к событию mouseover.
https://stackoverflow.com/questions/30911933/mouseover-or-hover-vue-js/36201164#comment73027876_36201164
Я использую Vue, и это лучшее решение для меня. У меня есть вложенный список с кнопками, которые должны появляться только при наведении, и использование дополнительных переменных для отслеживания состояния наведения является излишним. CSS гораздо элегантнее. Спасибо qsc!
shakee93

24.10.2016 11:02:38

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

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

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

data : {
    upHere : false
}

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

Источник
https://stackoverflow.com/questions/30911933/mouseover-or-hover-vue-js/40213416#comment79319653_40213416
Это должно быть общепринятым ответом! Принятый и наиболее часто встречающийся ответ действительно приводит к появлению мерцающего компонента. Каждое движение курсора на @mouseover-div инвертирует текущее состояние...
https://stackoverflow.com/questions/30911933/mouseover-or-hover-vue-js/40213416#comment82185962_40213416
Если вы показываете скрытый div, как речевой пузырь, вы получите мерцание при наведении курсора мыши. Просто добавьте тот же самый удивительный код mouseover/mouseleave в скрытый div.
https://stackoverflow.com/questions/30911933/mouseover-or-hover-vue-js/40213416#comment87328320_40213416
Работает для меня, с webpack просто нужно изменить ваши данные как: data: () => ({ upHere: false })
LittleStupid

11.11.2016 02:41:39

Я придумал ту же самую проблему, и я ее решаю !

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

Источник
funkvn

03.05.2018 02:04:08

Есть корректный рабочий JSFiddle: http://jsfiddle.net/1cekfnqw/176/

<p v-on:mouseover="mouseOver" v-bind:class="{on: active, 'off': !active}">Hover over me!</p>
Источник
besthost

28.05.2018 12:46:43

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

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

<script>
export default {
  data(){
   return {
     active: false
   }
 }
</script>
Источник
fitorec

02.08.2018 07:40:57

С mouseoverи mouseleave 

var vm = new Vue({
	el: '#app',
	data: {btn: 'primary'}
});

Источник
DigitalDrifter

16.01.2019 08:11:52

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

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

Источник
Hardik Raval

25.12.2019 12:11:45

Вот очень простой пример для MouseOver и MouseOut:

<div id="app">
   <div :style = "styleobj" @mouseover = "changebgcolor" @mouseout = "originalcolor"> 
   </div>
</div>

new Vue({
  el:"#app",
  data:{
     styleobj : {
       width:"100px",
       height:"100px",
       backgroundColor:"red"
     }
  },
  methods:{
    changebgcolor : function() {
      this.styleobj.backgroundColor = "green";
    },
    originalcolor : function() {
      this.styleobj.backgroundColor = "red";
    }
  }
});
Источник

Другие вопросы

Ответы на ваши вопросы

Закрыть X