如何在使用 Quasar 框架和 Vue.js 将鼠标悬停在图像上时显示一些信息答案

【问题标题】：How to display some info when you hover on image using Quasar framework and Vue.js如何在使用 Quasar 框架和 Vue.js 将鼠标悬停在图像上时显示一些信息
【发布时间】：2020-11-04 07:53:39
【问题描述】：

我需要在鼠标悬停时切换“显示”这个词

 <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>

【问题讨论】：

欢迎来到 Stackoverflow！提出问题时，请尝试展示您是如何尝试该问题的，以便用户提供更好的反馈。

标签： javascript vue.js vuejs2 quasar-framework quasar

【解决方案1】：

您可以在 CSS 中做到这一点。这种方法的优点：

您不会因为不必要的逻辑而使您的模板和 JavaScript 变得混乱。
您可以添加 CSS 过渡效果。

例如

 <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;
}

【讨论】：

【解决方案2】：

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

<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>

在 vue 实例中

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

【讨论】：

听起来不错，但我认为有一个技巧可以用 quasar 框架本身制作这段代码，无论如何，我很感激，谢谢