Я пытаюсь создать эффект наведения на изображения с помощью Vue.js. Я написал следующий код, но теперь, когда я наводю курсор на одно из изображений, текст появляется поверх всех изображений. Как я могу решить эту проблему? Я хочу, чтобы отображался только текст, принадлежащий изображению, на которое я наведен. Спасибо заранее за вашу помощь.

Шаблон Vue:


<template>
<div class="row partner-body-row">
        <div class="col">
          <div
            class="img-wrapper"
            @mouseover="showText = true"
            @mouseleave="showText = false"
          >
            <img
              class="hover-img"
              src="img/img-1"
              alt="img-1"
            />
            <span v-if="showText">Text 1</span>
          </div>
        </div>
<div class="col">
          <div
            class="img-wrapper"
            @mouseover="showText = true"
            @mouseleave="showText = false"
          >
            <img
              class="hover-img"
              src="img/img-2"
              alt="img-2"
            />
            <span v-if="showText">Text 2</span>
          </div>
        </div>
        <div class="col">
          <div
            class="img-wrapper"
            @mouseover="showText = true"
            @mouseleave="showText = false"
          >
            <img
              class="hover-img"
              src="img/img-3"
              alt="img-3"
            />
            <span v-if="showText">Text 3</span>
          </div>
        </div>
        
     <div class="col">
          <div
            class="img-wrapper"
            @mouseover="showText = true"
            @mouseleave="showText = false">
            <img
              class="hover-img"
              src="img/img-4"
              alt="img-4"
            />
            <span v-if="showText">Text 4</span>
          </div>
        </div>
      </div>
</template>

Сценарий:

export default {
  data: () => {
    return {
      showText: false,
    };
  },
};
0
Illes Toth Visualz 25 Сен 2021 в 23:14

2 ответа

Лучший ответ

Все условия привязаны к одной и той же переменной, пусть эта переменная содержит номер каждого изображения, а не только истину / ложь.

И в идеале это должно быть сделано в CSS с помощью :hover

<template>
<div class="row partner-body-row">
        <div class="col">
          <div
            class="img-wrapper"
            @mouseover="showText = 1"
            @mouseleave="showText = 0"
          >
            <img
              class="hover-img"
              src="img/img-1"
              alt="img-1"
            />
            <span v-if="showText === 1">Text 1</span>
          </div>
        </div>
<div class="col">
          <div
            class="img-wrapper"
            @mouseover="showText = 2"
            @mouseleave="showText = 0"
          >
            <img
              class="hover-img"
              src="img/img-2"
              alt="img-2"
            />
            <span v-if="showText === 2">Text 2</span>
          </div>
        </div>
        <div class="col">
          <div
            class="img-wrapper"
            @mouseover="showText = 3"
            @mouseleave="showText = 0"
          >
            <img
              class="hover-img"
              src="img/img-3"
              alt="img-3"
            />
            <span v-if="showText === 3">Text 3</span>
          </div>
        </div>
        
     <div class="col">
          <div
            class="img-wrapper"
            @mouseover="showText = 4"
            @mouseleave="showText = 0">
            <img
              class="hover-img"
              src="img/img-4"
              alt="img-4"
            />
            <span v-if="showText === 4">Text 4</span>
          </div>
        </div>
      </div>
</template>

export default {
  data: () => {
    return {
      showText: 0,
    };
  },
};
0
Kareem Kamal 25 Сен 2021 в 20:40

Вы можете просто создать компонент для каждого изображения с помощью всплывающей подсказки, например:

Vue.config.productionTip = false;

const Img = {
  name: 'Img',
  props: ['src'],
  data() {
    return { showText: false }
  },
  template: '<div><img @mouseover="showText = true" @mouseleave="showText = false":src="src" /><span v-if="showText">Tooltip</span></div>',
};

const App = new Vue({
  el: '#root',
  components: { Img },
  template: '<div><Img src="https://via.placeholder.com/150"/><Img src="https://via.placeholder.com/150"/></div>',
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root"/>
0
dave 25 Сен 2021 в 20:51