Vue JS - How to bind two event @mouseover and @click at the same time

Question

I have four pictures, when I hover the mouse over them, a certain component is displayed from below, but I still need to bind the click event, that is, when I click on the picture, the component should be displayed; when the component is clicked again, the problem is that I cannot bind two events at once at the same time

I understand that when the user hovers over the component, it will be immediately displayed and the click event will be useless, but I will need it in the mobile version

You can also look at my code in codesandbox

<template>
  <div>
    <div class="enjoy_headline_container">
      <div class="EnjoyGirlsContainer">
        <div>
          <h3 style="margin: 0"></h3>
        </div>

        <div class="EnjoyGirlsList">
          <div
            v-for="(chunk, index) in Math.ceil(EnjoyGirlsList.length / 2)"
            :key="'chunk-' + index"
            :class="'wrap-' + index"
          >
            <div
              v-for="(item, index) in EnjoyGirlsList.slice(
                (chunk - 1) * 2,
                chunk * 2
              )"
              :key="'img-' + index"
              class="EnjoyCard"
              :class="'EnjoyCard-' + index"
            >
              <div v-on:click="isHidden = !isHidden">
                <img
                  @mouseover="mouseOver(item, (hover = true))"
                  :src="item.imagePath"
                  alt="Snow"
                />
              </div>

              <div class="EnjoyCardContainer">
                <div
                  :style="{ background: item.textColor }"
                  class="EnjoyCardChildContainer"
                >
                  <h3 class="EnjoyCardChildContainerTitleName">
                    {{ item.titleName }}
                  </h3>
                </div>
              </div>

              <div
                v-if="selected === item && !isHidden"
                class="below-all-description EnjoyGirlsHoverEffect"
              >
                <div class="next-to-description EnjoyGirlsHoverEffect">
                  <div
                    style="width: 100%; display: flex; justify-content: center"
                    v-for="(enjoy, index) in EnjoyGirlsList"
                    :key="index"
                  >
                    <div
                      @mouseleave="mouseout(enjoy, (hover = false))"
                      class="EnjoyGirlsChildHoverEffect"
                    >
                      <component
                        v-show="enjoy.hovered"
                        v-bind:is="enjoy.componentName"
                      ></component>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-if="!isHidden" class="below-all-description">
          <template v-if="selected === null"></template>
          <template v-else>
            <div
              style="width: 100%; display: flex; justify-content: center"
              v-for="(enjoy, index) in EnjoyGirlsList"
              :key="index"
            >
              <div
                @mouseleave="mouseout(enjoy, (hover = false))"
                class="EnjoyGirlsChildHoverEffect"
              >
                <component
                  v-show="enjoy.hovered"
                  v-bind:is="enjoy.componentName"
                ></component>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EnjoyBlue from "./components/EnjoyBlue";
import EnjoyGreen from "./components/EnjoyGreen";
import EnjoyYellow from "./components/EnjoyYellow";
import EnjoyRed from "./components/EnjoyRed";

export default {
  name: "HomePage",
  components: {
    EnjoyRed,
    EnjoyYellow,
    EnjoyGreen,
    EnjoyBlue,
  },

  data() {
    return {
      isHidden: false,
      selected: null,
      hover: false,
      sectionGirlsListComponentsNames: [
        "EnjoyRed",
        "EnjoyYellow",
        "EnjoyGreen",
        "EnjoyBlue",
      ],
      EnjoyGirlsList: [
        {
          imagePath: "https://i.ibb.co/mCpNXhG/IMG-6061-min.png",
          titleName: "TEENS",
          textColor: "#74C8C5",
          hovered: false,
          componentName: "EnjoyBlue",
        },
        {
          imagePath: "https://i.ibb.co/WvJjwsN/Rectangle-2.png",
          titleName: "MINXES",
          textColor: "#76ED00",
          hovered: false,
          componentName: "EnjoyGreen",
        },
        {
          imagePath: "https://i.ibb.co/7khc5f0/Rectangle-3.png",
          titleName: "MILFS",
          textColor: "#FFE600",
          hovered: false,
          componentName: "EnjoyYellow",
        },
        {
          imagePath: "https://i.ibb.co/6nz97Bw/Rectangle-4.png",
          titleName: "COURGARS",
          textColor: "#CC003D",
          hovered: false,
          componentName: "EnjoyRed",
        },
      ],
    };
  },
  methods: {
    mouseOver: function (enjoy) {
      this.EnjoyGirlsList.forEach((enjoy) => (enjoy.hovered = false));
      this.selected = enjoy;
      enjoy.hovered = true;
      if (this.hover) {
        console.log("4949494");
      }
    },
    mouseout: function (enjoy) {
      this.selected = null;
      enjoy.hovered = false;
    },
    mouseEnter: function () {},
    Prev() {
      this.$refs.carousel.prev();
    },
    showNext() {
      this.$refs.carousel.next();
    },
  },
};
</script>

And so if you looked at this code in codesandbox (I left the link at the top), then you might have noticed that hover only works the first time after that it does not work, only the click event works

Answer 1

Your click event toggles isHidden . When you click on it you set isHidden to true . After that it won't show, if you hover over it since you are hiding it with v-if :

<div v-if="!isHidden" class="below-all-description">
...
</div>

Solution: In your mouseOver function you explicitly have to set isHidden to false .

methods: {
    mouseOver: function (enjoy) {
        this.isHidden = false;
        this.EnjoyGirlsList.forEach((enjoy) => (enjoy.hovered = false));
        ...
    }
    ...
}