Shifting the placement of a component in Vue JS when hovering the mouse

I am facing an issue regarding the positioning of components. I have four images, and when you hover over them, a specific component is displayed as shown below:

https://i.sstatic.net/gybcy.png

For example, hovering over a yellow image will display a different component below it, and so on for all images.

The problem arises when the screen size reaches 568 pixels, i.e., the mobile version. In this case, I need to adjust the position of the displayed components because currently in the mobile version, they appear like this:

https://i.sstatic.net/wjenA.png

You can see that all the components are displayed at the bottom, but I need them to be situated below each respective image.

In other words, I want them to look like this:

https://i.sstatic.net/rJcVk.png

You can view the code on codesandbox

App.vue

<template>
  <div>
    <div class="enjoy_headline_container">
      <div class="EnjoyGirlsContainer">
        <div>
          <h3>Shrink the screen to 568 pixels or lower to see the problem</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>
                <img
                  @mouseover="mouseOver(item, (hover = true))"
                  v-bind: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>
          </div>
        </div>
      </div>
      <div class="EnjoyGirlsHoverEffect">
        <div
          class="HoverLogic"
          @mouseleave="mouseout(enjoy, (hover = false))"
          v-for="(enjoy, index) in EnjoyGirlsList"
          :key="index"
        >
          <div class="EnjoyGirlsChildHoverEffect">
            <component
              v-show="enjoy.hovered"
              v-bind:is="enjoy.componentName"
            ></component>
          </div>
        </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 {
      homePageImageList: [
        {
          imageURL:
            "http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
        },
        {
          imageURL:
            "http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
        },
        {
          imageURL:
            "http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
        },
      ],
      hover: false,
      sectionGirlsListComponentsNames: [
        "EnjoyRed",
        "EnjoyYellow",
        "EnjoyGreen",
        "EnjoyBlue",
      ],
      EnjoyGirlsList: [
        {
          imagePath:
            "https://lh3.googleusercontent.com/_0OiZeWgElIETUMZW8B9wEZR-V0BLMyDBHfK6hdYQVGzsryLQAZ0GEL9_PDi5NlzmpK8bETuJcZ0CtUQKnErvs36Xw=w640-h400-e365-rj-sc0x00ffffff",
          titleName: "TEENS",
          textColor: "#74C8C5",
          hovered: false,
          componentName: "EnjoyBlue",
        },
        {
          imagePath:
            "https://p0.piqsels.com/preview/32/831/578/leaf-malina-garden-nature-thumbnail.jpg",
          titleName: "MINXES",
          textColor: "#76ED00",
          hovered: false,
          componentName: "EnjoyGreen",
        },
        {
          imagePath:
            "https://dandelionmarketing.com/wp-content/uploads/2020/01/yellow-09.jpg",
          titleName: "MILFS",
          textColor: "#FFE600",
          hovered: false,
          componentName: "EnjoyYellow",
        },
        {
          imagePath:
            "http://pm1.narvii.com/6691/30c6c5246b1aee0e676f741f63ab144bbdb77da2_00.jpg",
          titleName: "COUGARS",
          textColor: "#CC003D",
          hovered: false,
          componentName: "EnjoyRed",
        },
      ],

    };
  },
  methods: {

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

    mouseout: function (enjoy) {
      enjoy.hovered = false;
    },

  },
};
</script>

EnjoyBlue

<template>
   <p>Blue Component</p>
</template>

EnjoyGreen

<template>
   <p>Green Component</p>
</template>

EnjoyYellow

<template>
   <p>Yellow Component</p>
</template>

EnjoyRed

<template>
   <p>Red Component</p>
</template>
javascriptarraysvue.jsvuejs2

Answer №1

If you're looking to achieve this, there are numerous methods available. One effective approach is to include the information in "both" locations simultaneously and manage its display using CSS media queries. You can find more information on how to do this here: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Essentially, it will resemble something like this:

<Cougars>
 <EnjoyRed class="next-to-description" />
</Cougars>
.
.
. (remaining content)
.
.
</component :is="enjoy.componentName" class="below-all-description" />

Then, define some CSS rules as follows:

.next-to-description {
  display: block;
}

.below-all-description {
  display: none;
}

@media screen and (min-width: 568px) {
  .next-to-description {
    display: none;
  }
  .below-all-description {
    display: block;
  }
}

Ensure that when <Cougars> triggers a mouseover event, you populate the EnjoyRed component using v-if or similar techniques while also utilizing <component :is="..">

The provided CSS will ensure only one item is visible at any given time.

For a basic example of this concept, feel free to check out my demonstration on jsfiddle:

https://jsfiddle.net/y8k1pgd9/

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

Why won't the click event work in Vue when using v-if or v-show?

Attempting to trigger a click event from a div, but if v-if false is present during component rendering, the click event does not work. Here's the code snippet: export default { name: "ProSelect", data() { return { isActive: false ...

javascriptvue.js

Is it possible for AJAX to update a button's argument?

After successfully using AJAX to extract a data value from a button click, I am now looking to pass this value as an argument to another button on the same page. Is there a way to achieve this seamlessly? Sample code from test.html: <a href="#" onClic ...

javascriptajaxjquery

Implementing data waiting strategy in Vue component using TypeScript for rendering

When working with the first component, I encountered a scenario where I needed to open a new page using the router functionality: In Component_1.vue: let route = this.$router.resolve({ name: 'Schedule', params : { id: (this.schedule[0].schedule ...

typescriptvue.jsvue-router

How come outerHTML retrieves <!-- --> comments?

I came across a jsfiddle link that showcases the collection of outerHTML for elements with a class='active'. Surprisingly, even when certain parts of the HTML are commented out like this: <!-- <div>'Some inner text'</d ...

javascriptjqueryhtmlouterhtml

What are the steps to resolving an issue with importing a css file in next.js?

Error: ./node_modules/quill-emoji/dist/quill-emoji.css ModuleParseError: Module parse failed: Unexpected character '�' (1:0) You may need a suitable loader for handling this file type, as there are currently no configured loaders to process it. ...

javascriptreactjsbabeljsnext.js

The error message "TypeError: default is not a function when using vitest" indicates that

I am currently utilizing vitest for unit testing in my Vue application. After writing some tests, I encountered a failure with the error message: 'TypeError: default is not a function'. However, there's no instance of a function called defau ...

vue.jsunit-testingvitest

Tips for leveraging stage 3 functionalities in TypeScript?

Array.prototype.at() is currently in the proposal stage 3. Even after adding "lib": ["ESNext"] to my tsconfig.json, I encountered the error: Property 'at' does not exist on type 'number[]'. Could you shed some light ...

javascripttypescript

Tips for invoking a Laravel Model function with a parameter in a Vue.js template

I'm facing an issue with displaying stock quantities for products in a Vue.js template. I have a product table and stock table where data about product sale and purchase are stored. I need to calculate the stock of each product based on purchase and s ...

javascriptphplaravelvue.js

In the world of Express, the res.write function showcases the magic of HTML elements contained within

Currently diving into web app development, I have ventured into using express and implemented the following code snippet: app.post("/", function(req, res) { var crypto = req.body.crypto; var fiat = req.body.fiat; var amount = req.body.amount; va ...

javascriptexpress

Managing JSON data within a MySQL database

In my opencart 2.1 setup, there is a text array field on the customer table called 'custom'. The contents of this field (named custom, type text) are structured like this: {"2":"2015","1":"2000-11-19"} The first part represents the birthday (whic ...

phpmysqlsqlarrays

Retrieving dropdown options with the help of selenium and node.js

I'm looking to gather all the options from a dropdown menu and loop through them to submit a form. I need the list of values from the dropdown. The following Java code meets my requirements perfectly, but I am in need of the same functionality in Jav ...

javascriptnode.jsselenium

Implementing Materialize CSS functionality for deleting chips

I've been attempting to extract the tag of a deleted chip from the div within the Materialize chips class, but I'm hitting roadblocks. My failed attempts so far: $('.chips').on('chip.delete', function(e, chip){ console.lo ...

javascriptjqueryhtmlcssmaterialize

Error: JSON parsing failed due to an unexpected token 'S' at position 17

Trying to troubleshoot a syntax error in JSON.parse() within a product warranty registration process. Transitioning from Java to AngularJS for this project, I have an API built in PHP handling the back-end operations and a controller managing communication ...

javascriptphpangularjsjsonbackend

Storing the output of asynchronous promises in an array using async/await technique

I am currently working on a script to tally elements in a JSON file. However, I am encountering difficulty in saving the results of promises into an array. Below is the async function responsible for counting the elements: async function countItems(direct ...

javascriptnode.jsexpressasynchronousasync-await

converting nested object structures in typescript

I'm trying to flatten a nested object in my Loopback and Typescript controller Here's the structure of my model : export class SampleModel { id: number; code: number; guide?: string; gradeData?: string; } Take a look at this example obj ...

javascripttypescriptloopbackjsloopback3

Creating a feature that uses a button press to initiate an Ajax request based on a specific identifier

I'm looking for the most efficient way to structure a page that involves making Ajax calls. My main issue lies in setting up the event binding for when a user clicks a button. I'm struggling to find a method to pass the ID to the function that t ...

javascriptjqueryajax

Having trouble with the alias in commander.js not functioning as desired when using the "--help" option

Currently, I am facing a strange issue while working on my project with commander.js. The problem arises when assigning an alias for a command. I looked at some examples mentioned in the reference: Commander.JS Example I decided to create a git-like comma ...

javascriptnode.js

The issue of broken reactivity arises when utilizing defineStore in Pinia with options instead of storeSetup

In my current project, I've implemented two different types of Pinia storage definitions. Here's a condensed look at each: // First Storage Definition using storeSetup export const useStore = defineStore("storeId", () => { const isExpanded: ...

typescriptvue.jsdebuggingchrome-extension-manifest-v3pinia

How can we increase the accuracy of numerical values in PHP?

When performing a math operation in JavaScript, the result is: 1913397 / 13.054 = 146575.53240386088 However, when the same operation is performed in PHP, the result is slightly different: 1913397 / 13.054 = 146575.53240386 This discrepancy may be due ...

phpjavascriptfloating-pointprecision

Assigning controller variables within an ajax request

I'm new to AngularJS and I have a question about controller attributes. I've created an attribute called 'anuncio', which contains an array of objects as shown below: var anuncioModule = angular.module('anuncioModule',[]); a ...

javascriptangularjs