[英]How to detect Close Tab/ Browser for logout in javascript vue.js with quasar framework
[英]How to display some info when you hover on image using Quasar framework and 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>
使用 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
}
}
你可以在 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.