Displaying some elements on hover


#1

Hi,
I guess the question is dummy, but, i cannot find a right way to display some elements when user hovers on its parent element.

Please consider the pen below:

How do i make the green div only show up when user hover on “div.parent” ?


#2

Luckily, Vue has some mouse events, we will use @mouseover and @mouseout to set a variable that tracks the index of the currently hovered item in your array. When the mouse moves out, we set it back to null, then we use a v-show (or v-if) and show that specific green box when the index for that row is equal to the variable we set during mouseover

<div id="app">
  <div class="parent" v-for="i in 10" @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>
new Vue({
  el: '#app',
  data: {
    showByIndex: null
  },
});

#3

Thanks a lot, bolerodan ! :slight_smile:


#4

Hi one Question, If on the mouseover on the parent I want to hide the parent and show the child
and on mouseleave show the parent hide the child, how can I do this?