I need to toggle the word "show" when hovering on it
<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>
Use mouseover and mouseleave event (in div or q-img tag)
<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>
And in vue instance
data: function () {
return {
showText: false
}
}
You can do it in CSS. Advantage of this approach:
eg
<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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.