Javascript 鼠标悬停或悬停 vue.js
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30911933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mouseover or hover vue.js
提问by Anders Andersen
I would like to show a div when hovering over an element in vue.js. But I can't seem to get it working.
我想在将鼠标悬停在 vue.js 中的元素上时显示一个 div。但我似乎无法让它工作。
It looks like there is no event for hover or mouseover in vue.js. Is this really true?
看起来 vue.js 中没有悬停或鼠标悬停事件。这是真的吗？
Would it be possible to combine jquery hover and vue methods?
是否可以结合使用 jquery 悬停和 vue 方法？
采纳答案by Jarrod
Here is a working example of what I think you are asking for.
这是我认为您要求的工作示例。
http://jsfiddle.net/1cekfnqw/3017/
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;
}
}
});
回答by shakee93
i feel above logics for hover is incorrect. it just inverse when mouse hovers. i have used below code. it seems to work perfectly alright.
我觉得上面的悬停逻辑是不正确的。它只是在鼠标悬停时反转。我使用了下面的代码。它似乎工作得很好。
<div @mouseover="upHere = true" @mouseleave="upHere = false" >
<h2> Something Something </h2>
<some-component v-show="upHere"></some-component>
</div>
on vue instance
在 vue 实例上
data : {
upHere : false
}
Hope that helps
希望有帮助
回答by NICO
There's no need for a method here.
这里不需要方法。
HTML
HTML
<div v-if="active">
<h2>Hello World!</h2>
</div>
<div v-on:mouseover="active = !active">
<h1>Hover me!</h1>
</div>
JS
JS
new Vue({
el: 'body',
data: {
active: false
}
})
回答by qsc vgy
To show child or sibling elements it's possible with CSS only. If you use :hoverbefore combinators (+, ~, >, space). Then the style applies not to hovered element.
要显示子元素或兄弟元素，只能使用 CSS。如果:hover在组合子 ( +, ~, >, space)之前使用。然后样式不适用于悬停元素。
HTML
HTML
<body>
<div class="trigger">
Hover here.
</div>
<div class="hidden">
This message shows up.
</div>
</body>
CSS
CSS
.hidden { display: none; }
.trigger:hover + .hidden { display: inline; }
回答by fitorec
With mouseoverand mouseleaveevents you can define a toggle function that implements this logic and react on the value in the rendering.
使用mouseover和mouseleave事件，您可以定义一个切换函数来实现此逻辑并对渲染中的值做出反应。
Check this example:
检查这个例子：
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>回答by besthost
With mouseoveronly the element stays visible when mouse leaves the hovered element, so I added this:
随着mouseover只是停留元素时可见叶鼠标悬停元素，所以我加了这一点：
@mouseover="active = !active" @mouseout="active = !active"
@mouseover="active = !active" @mouseout="active = !active"
<script>
export default {
data(){
return {
active: false
}
}
</script>
回答by DigitalDrifter
It's possible to toggle a class on hover strictly within a component's template, however, it's not a practical solution for obvious reasons. For prototyping on the other hand, I find it useful to not have to define data properties or event handlers within the script.
可以在组件模板中严格地在悬停时切换类，但是，由于显而易见的原因，这不是一个实用的解决方案。另一方面，对于原型设计，我发现不必在脚本中定义数据属性或事件处理程序很有用。
Here's an example of how you can experiment with icon colors using Vuetify.
这是一个如何使用 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>回答by LittleStupid
I came up with the same problem, and I work it out !
我想出了同样的问题，我解决了！
<img :src='book.images.small' v-on:mouseenter="hoverImg">回答by funkvn
There is a correct working JSFiddle: http://jsfiddle.net/1cekfnqw/176/
有一个正确的 JSFiddle：http: //jsfiddle.net/1cekfnqw/176/
<p v-on:mouseover="mouseOver" v-bind:class="{on: active, 'off': !active}">Hover over me!</p>
回答by Hardik Raval
Here is a very simple example for MouseOver and MouseOut:
这是一个非常简单的 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";
}
}
});
