Combining Mouseover and Click Events in Vue JS

Having four pictures, I want to display a specific component when hovering over them. However, I also need to bind the click event so that clicking on the picture will reveal the component. The challenge is that I am unable to simultaneously bind two events at the same time.

I realize that when users hover over the component, it will instantly appear, rendering the click event useless. Nonetheless, I will require it for the mobile version.

You can view my code in codesandbox here

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

If you checked out this code in codesandbox using the link above, you may have noticed that hover only works the first time and then stops working, with only the click event being functional thereafter.

javascriptvue.jsvuejs2onclick

Answer №1

Whenever you click, the isHidden value toggles. If you click on it, isHidden changes to true. As a result, when you hover over it, it won't appear because it is hidden using v-if:

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

Here's the fix: Inside your mouseOver function, be sure to explicitly set isHidden to false.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to choose a single li element?

I am working on creating a reservation system using HTML, CSS, and JS. I want to customize the color of the border for each list item (li). However, I want only one li to be selected at a time. When I click on a different li, it should remove the selection ...

javascripthtmlcssarrays

How to create a loop in Selenium IDE for selecting specific values from a drop-down list?

Is there a way to use Selenium IDE and JavaScript to test a drop-down box with specific items, not all of them, and continuously loop through until the entire list is covered? Any tips or recommendations on how to accomplish this? ...

javascriptloopsseleniumide

"Safari (iOS) is experiencing a functionality issue where Alert() is working, but console.log() is

Just a heads up before you dive in: I've encountered an issue with Safari related to Chrome, but it seems to work fine on other browsers. So, it could be more OS-specific rather than a general problem. I recently ran into a frustrating situation whil ...

javascriptajaxsafariconsole

customizing highcharts title within a popup window

Is there a way to dynamically set the title of a Highcharts chart from an element? Check out my code snippet below: $(function () { var chart; $('#second-chart').highcharts({ chart: { type: 'bar' }, subtitle: { ...

javascriptjqueryhighcharts

Implementing a switch feature with enable/disable functionality in a material table using table row data

Is there a way to incorporate an additional action in the Material table and have it included in the React material table along with the element? Furthermore, how can I obtain row data on onChange event while currently rendering it in the state? I would a ...

javascriptreactjsmaterial-uimaterial-table

Tips for creating mocks/stubs for vue-i18n?

I have recently made the switch from Jest to Vitest as my unit testing library for my Vue 3 application. Currently, I am facing an issue while trying to write a unit test for a component that utilizes the vue-i18n library for text translation. When attemp ...

javascriptvue.jsvuejs3vue-i18nvitest

I am experiencing difficulty in successfully transmitting a variable from my jQuery code to my PHP code

I've been attempting to pass a variable from my jQuery code to my HTML/PHP code using AJAX and POST. However, I'm encountering an error message stating "Notice: Undefined index: testData in C:\xampp\htdocs\teszt\test1.php on l ...

javascriptphpjqueryajaxpost

Efficiently uploading images with AJAX when submitting a form

I am attempting to upload an image along with other variables in a form submission, and then execute my PHP code to store the image in the user's profile_picture table. I want the image upload to be integrated within the same form used for saving dat ...

javascriptajax

Struggling to retrieve the 'this' object using a dynamic string

Within my Nuxt + TS App, I have a method that attempts to call a function: nextPage(paginationName: string): void { this[`${paginationName}Data`].pagination .nextPage() .then((newPage: number) => { this.getData(pagination ...

typescriptvue.jsnuxt.js

Displaying handpicked phrases [Javascript]

When you click your mouse on a sentence, the words inside are highlighted. This feature works flawlessly. However, trying to display the selected words using the button doesn't seem to be functioning as intended. JSFiddle words = []; var sentence ...

javascriptjqueryhighlight

Is there a way to retrieve the textFrame where the cursor is currently located?

While inputting text into a frame, I am looking to execute a script. I want this script to target the specific text frame where my cursor is located. How can I reference this particular textFrame using Javascript? ...

javascriptadobe-indesign

Leveraging the Wikia API

I've been attempting to utilize the X-men API on Wikia in order to gather the name and image of each character for use in a single page application using JavaScript. You can find the link to the wiki page here: Despite my efforts, I am struggling to ...

javascriptapiwikia

Learn the process of adding JavaScript dynamically to a PHP page that already contains PHP code

SOLVED IT <?php $initialPage = $_COOKIE["currentPage"];?> <script type="text/javascript"> var initialPageVal = <?php echo $initialPage; ?>; <?php echo base64_decode($js_code); ?> </script> where $js_code is the following cod ...

phpjavascriptjquerymysql

Tips for toggling Bootstrap 5 tabs using JavaScript instead of the button version

I am looking to switch tabs programmatically using bootstrap 5. The Bootstrap documentation recommends using buttons for tabs instead of links for a dynamic change. Here is the code I have: $("#mybut").click(function() { var sel = document.querySelector( ...

javascripttwitter-bootstrapbuttontabsbootstrap-5

Converting text to JSON using JSONP with jQuery's AJAX functionality

Potential Duplicate Question 1 Possible Duplicate Inquiry 2 I have been searching for a definitive explanation on JSONP across various questions but haven't been able to find one yet. For instance, I am attempting to make a cross domain request us ...

javascriptjqueryajaxjsonjsonp

What is the best way to ensure that the search box automatically adjusts its position and size regardless of the screen resolution?

I'm currently working on a responsive website project and facing an issue with the absolute positioning of the search bar on the main page, which is crucial for me. Below is the code snippet: <div class="span4"> <form class="well form ...

javascriptjqueryhtmlcss

Make sure that the webpage does not display any content until the stylesheet has been fully loaded by

I am seeking to utilize ng-href for loading different Themes. One issue I am encountering is that the unstyled content appears before the stylesheet is applied. I have created a Plunker where I made changes to Line 8 in the last 3 Versions for comparison ...

javascriptjqueryhtmlcssangularjs

JavaScript (specifically, using jQuery) in conjunction with AJAX

After using validation with jQuery in JavaScript and applying it to ASP.NET controls within an AJAX update panel, I encountered a problem. The validations are working correctly, but the event of the button control is still being executed despite the valida ...

javascriptjqueryasp.netajax

Automatically assigning a FormData key/value pair upon clicking using Puppeteer in NodeJS

While working on a NodeJS project, I am using Puppeteer to fill out a form. So far, the regular type and click functions work perfectly. After clicking the "submit" button, a POST request is sent to the server with some form data. I want to add a key/value ...

javascriptnode.jspuppeteerform-data

Facing difficulty in uploading image to local server using Froala editor

For testing purposes, I've been attempting to upload images using the Froala WYSIWYG editor on my localhost, but unfortunately, it's not functioning as expected. After selecting an image to upload, it briefly appears faded in the editor and then ...

javascriptphpajaxfroala