Simple QHover Component

[SeagleDub]

I needed to display an element depending on the hover state of the parent element. So I created a simple component similar to the VHover (Vuetify) component.

QHover.vue

<script>
import { ref } from 'vue';

export default {
  setup(props, { slots }) {
    const isHovering = ref(false);

    const handleMouseEnter = () => {
      isHovering.value = true;
    };

    const handleMouseLeave = () => {
      isHovering.value = false;
    };

    return () => slots.default?.({
      isHovering: isHovering.value,
      props: {
        onMouseenter: handleMouseEnter,
        onMouseleave: handleMouseLeave,
      },
    })
  },
};
</script>

HomeComponent.vue

<template>
      <q-hover v-slot="{props, isHovering}">
          <div v-bind="props">
            <transition name="q-transition--scale">
              <q-icon name="play_circle_outline" v-if="isHovering"/>
            </transition>
          </div>
      </q-hover>
</template>