title: Why every text shows on img hover when using v-if, v-else, @mouseover and @mouseleave in Vue.js?
body: <p>I am trying to create a hover effect on images with Vue.js. I wrote the following code, but now as I hover over one of the images, the text shows up over all the images.
  How can I resolve this problem? I want only the text that belongs to the image I hovered over to appear. Thank you in advance for your help.</p>
  <p>Vue template:</p>
  <pre><code>
  &lt;template&gt;
  &lt;div class=&quot;row partner-body-row&quot;&gt;
          &lt;div class=&quot;col&quot;&gt;
            &lt;div
              class=&quot;img-wrapper&quot;
              @mouseover=&quot;showText = true&quot;
              @mouseleave=&quot;showText = false&quot;
            &gt;
              &lt;img
                class=&quot;hover-img&quot;
                src=&quot;img/img-1&quot;
                alt=&quot;img-1&quot;
              /&gt;
              &lt;span v-if=&quot;showText&quot;&gt;Text 1&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  &lt;div class=&quot;col&quot;&gt;
            &lt;div
              class=&quot;img-wrapper&quot;
              @mouseover=&quot;showText = true&quot;
              @mouseleave=&quot;showText = false&quot;
            &gt;
              &lt;img
                class=&quot;hover-img&quot;
                src=&quot;img/img-2&quot;
                alt=&quot;img-2&quot;
              /&gt;
              &lt;span v-if=&quot;showText&quot;&gt;Text 2&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col&quot;&gt;
            &lt;div
              class=&quot;img-wrapper&quot;
              @mouseover=&quot;showText = true&quot;
              @mouseleave=&quot;showText = false&quot;
            &gt;
              &lt;img
                class=&quot;hover-img&quot;
                src=&quot;img/img-3&quot;
                alt=&quot;img-3&quot;
              /&gt;
              &lt;span v-if=&quot;showText&quot;&gt;Text 3&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          
       &lt;div class=&quot;col&quot;&gt;
            &lt;div
              class=&quot;img-wrapper&quot;
              @mouseover=&quot;showText = true&quot;
              @mouseleave=&quot;showText = false&quot;&gt;
              &lt;img
                class=&quot;hover-img&quot;
                src=&quot;img/img-4&quot;
                alt=&quot;img-4&quot;
              /&gt;
              &lt;span v-if=&quot;showText&quot;&gt;Text 4&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>Script:</p>
  <pre><code>export default {
    data: () =&gt; {
      return {
        showText: false,
      };
    },
  };
  </code></pre>