new Vue({
el: '#mouse',
data: {
showByIndex: null
},
methods: {
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="mouse">
<div class="parent" v-for="i in 1" @mouseover="showByIndex = i" @mouseout="showByIndex = null">
<div class="child-one">
Some dummy text
</div>
<div class="child-two" v-show="showByIndex === i">
Show me only on hover on "div.parent" element
</div>
</div>
</div>Working example:- https://codepen.io/dhanunjayt/pen/XWgyqXW
With the above code i am able to show the text, when hover of the div element. But small issue is when hover first element should not reflect.
CodePudding user response：
Like following snipppet?
new Vue({
el: '#mouse',
data: {
showByIndex: null
},
methods: {
}
}).parent {
padding: 2em;
background: violet;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="mouse">
<div class="parent" v-for="i in 1" @mouseover="showByIndex = i" @mouseout="showByIndex = null">
<div class="child-one" v-show="showByIndex === null">
Some dummy text
</div>
<div class="child-two" v-show="showByIndex === i">
Show me only on hover on "div.parent" element
</div>
</div>
</div>