时间戳

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

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

问题描述

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

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

标签： javascriptvue.jsvuejs2quasar-frameworkquasar

解决方案

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

  1. 您不会用不必要的逻辑使您的模板和 javascript 混乱。
  2. 您可以添加 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;
}

推荐阅读