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
When using the above code snippet, I successfully display text when hovering over a div element. However, there is a small issue where the first element does not behave as expected.