Javascript Vue JS-如何更改鼠标悬停时显示的组件的位置

我有一个问题与组件的位置有关。我有四张图片，当你把鼠标悬停在上面时，会显示一个特定的组件，看起来像这样

<Cougars>
 <EnjoyRed class="next-to-description" />
</Cougars>
<MINXES>
 <EnjoyGreen class="next-to-description" />
</MINXES>
<MILFS>
 <EnjoyYellow class="next-to-description" />
</MILFS>

<component :is="enjoy.componentName" class="below-all-description" />

例如，如果将鼠标光标悬停在黄色图片上，则下面将显示另一个组件，依此类推，显示所有组件

我的问题是当屏幕达到568像素时，也就是移动版本，因为我需要更改显示组件的位置，因为在移动版本中，我应该显示的组件看起来是这样的

<Cougars>
 <EnjoyRed class="next-to-description" />
</Cougars>
<MINXES>
 <EnjoyGreen class="next-to-description" />
</MINXES>
<MILFS>
 <EnjoyYellow class="next-to-description" />
</MILFS>

<component :is="enjoy.componentName" class="below-all-description" />

请注意，所有组件都显示在底部，我需要它们显示在每个图像的底部

也就是说，我希望他们看起来像这样

你可以看到给定的

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: "COURGARS",
          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>

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

将屏幕缩小到568像素或更低以查看问题
{{item.titleName}
从“/components/EnjoyBlue”导入EnjoyBlue；
从“/components/EnjoyGreen”导入EnjoyGreen；
从“/components/EnjoyYellow”导入EnjoyYellow；
从“/components/EnjoyRed”导入EnjoyRed；
导出默认值{
名称：“主页”，
组成部分：{
享受，
享受黄色，
享受绿色，
享受蓝色，
},
数据（）{
返回{
主页图像列表：[
{
图像URL：
"http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
},
{
图像URL：
"http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
},
{
图像URL：
"http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
},
],
悬停：错，
节GirlListComponents名称：[
“享受”，
“享受黄色”，
“享受绿色”，
“享受蓝色”，
],
快乐女孩名单：[
{
图像路径：
"https://lh3.googleusercontent.com/_0OiZeWgElIETUMZW8B9wEZR-V0BLMyDBHfK6hdYQVGzsryLQAZ0GEL9_PDi5NlzmpK8bETuJcZ0CtUQKnErvs36Xw=w640-h400-e365-rj-sc0x00ffffff“，
书名：“青少年”，
textColor:#74C8C5“，
悬停：错，
组件名称：“EnjoyBlue”，
},
{
图像路径：
"https://p0.piqsels.com/preview/32/831/578/leaf-malina-garden-nature-thumbnail.jpg",
书名：“貂皮”，
textColor:#76ED00“，
悬停：错，
组件名称：“EnjoyGreen”，
},
{
图像路径：
"https://dandelionmarketing.com/wp-content/uploads/2020/01/yellow-09.jpg",
标题名称：“MILFS”，
textColor:#FFE600“，
悬停：错，
组件名称：“EnjoyYellow”，
},
{
图像路径：
"http://pm1.narvii.com/6691/30c6c5246b1aee0e676f741f63ab144bbdb77da2_00.jpg",
标题名称：“库尔加人”，
textColor:#CC003D“，
悬停：错，
组件名称：“EnjoyRed”，
},
],
};
},
方法：{
鼠标悬停：功能（享受）{
这个.EnjoyGirlsList.forEach（（享受）=>（享受.hovered=false））；
享受。悬停=真实；
},
鼠标输出：功能（享受）{
享受。悬停=错误；
},
},
};

享受蓝色

<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: "COURGARS",
          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>

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

蓝色成分

享受绿色

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

绿色成分

享受黄色

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

黄色成分

享受快乐

<template>
   <p>Red Component</p>
</template>

红色成分

有一百万种方法可以做到这一点。实现所需功能的一个简单方法是同时在“两个”位置包含信息，并通过CSS媒体查询控制其外观。请看这里：

所以基本上看起来是这样的

<Cougars>
 <EnjoyRed class="next-to-description" />
</Cougars>
<MINXES>
 <EnjoyGreen class="next-to-description" />
</MINXES>
<MILFS>
 <EnjoyYellow class="next-to-description" />
</MILFS>

<component :is="enjoy.componentName" class="below-all-description" />

现在，您只需确保无论何时

获得

鼠标悬停

事件，您都会使用v-if或其他内容填充

enjoyed

组件，并继续使用

CSS将控制并确保一次仅显示1

我在JSFIDLE上添加了一个我的想法的简单示例：

---

非常感谢您关注我的问题，您无法在codesandbox中显示此示例，我在我的问题上留下了一个链接，我添加了一个js小提琴，简化了代码，以便您可以专注于必要的更改。另外请注意，我的媒体查询中有一个输入错误-应该是，非常感谢您的持续支持。