How to hide div element on hover of mouse in Vuejs?

Issue

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.

Solution

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>

Answered By – Nikola Pavicevic

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.