Javascript 如何使用Quasar framework和Vue.js在图像上悬停时显示一些信息

我需要在鼠标悬停时切换单词“show”

 <div class="col-3">
   <q-img src="../assets/doctors/doctor-08.jpg">
      <div class="absolute-full text-subtitle2 flex flex-center">
            Show
      </div>
    </q-img>
 </div>

显示

使用mouseover和mouseleave事件（在div或q-img标签中）

---

使用mouseover和mouseleave事件（在div或q-img标记中）

---

你可以用CSS来做。这种方法的优点：

您不会用不必要的逻辑将模板和javascript弄得乱七八糟

您可以添加CSS过渡效果

e、 g

显示
.我的img.我的文本{
可见性：隐藏；
不透明度：0；
过渡：.3s；
}
.我的图片：悬停.我的文字{
能见度：可见；
不透明度：1；
过渡：.3s；
}

您可以在CSS中完成。这种方法的优点：

您不会用不必要的逻辑将模板和javascript弄得乱七八糟

您可以添加CSS过渡效果

e、 g

显示
.我的img.我的文本{
可见性：隐藏；
不透明度：0；
过渡：.3s；
}
.我的图片：悬停.我的文字{
能见度：可见；
不透明度：1；
过渡：.3s；
}

欢迎来到Stackoverflow！提问时，尽量展示您是如何尝试提问的，这样用户可以提供更好的反馈。欢迎使用Stackoverflow！当问问题时，试着展示你是如何尝试这个问题的，这样用户可以提供更好的反馈。听起来不错，但我认为有一个技巧可以使用quasar框架本身编写代码，无论如何，我很感激，谢谢。听起来不错，但我认为有一个技巧可以使用quasar框架本身编写代码，我很感激，谢谢你

<div class="col-3">
   <q-img src="../assets/doctors/doctor-08.jpg" @mouseover="showText = true" @mouseleave="showText = false">
      <div class="absolute-full text-subtitle2 flex flex-center" v-show="showText">
            Show
      </div>
    </q-img>
 </div>

data: function () {
    return {
      showText: false
    }
  }

 <div class="col-3">
   <q-img src="../assets/doctors/doctor-08.jpg" class="my-img">
      <div class="absolute-full text-subtitle2 flex flex-center my-text">
            Show
      </div>
    </q-img>
 </div>

.my-img .my-text {
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}

.my-img:hover .my-text {
  visibility: visible;
  opacity: 1;
  transition: .3s;
}