При наведении курсора или при наведении вю.JS
Я хотел бы показать div при наведении курсора на элемент в vue.JS. Но я никак не могу заставить его работать.
Похоже, что в vue нет события для наведения или наведения курсора мыши.JS. Неужели это действительно так?
Можно ли объединить методы jQuery hover и vue?

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

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

v-on:mouseover="mouseOver"
, но не упомянул, в какой версии vue изменился синтаксис




@mouseover:mouseover


v-on:mouseover
или контекстное @mouseover
на документы vuejs.org/guide/syntax.html#v-on-Shorthand

on
на v-on:
или @
для любого из атрибутов события html. w3schools.com/tags/ref_eventattributes.asp




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



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
}
Надеюсь, это поможет



data: () => ({ upHere: false })

11.11.2016 02:41:39
Я придумал ту же самую проблему, и я ее решаю !
<img :src='book.images.small' v-on:mouseenter="hoverImg">

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>


02.08.2018 07:40:57
С mouseover
и mouseleave
var vm = new Vue({
el: '#app',
data: {btn: 'primary'}
});

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>

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