Javascript Vue JS悬停问题

当鼠标悬停在其中一个图像上时，我有两个图像，当鼠标悬停在第一个图像上时，如果某个组件说得更详细，则显示该组件，显示红色背景的组件，当鼠标悬停在第二个图像上时，显示黄色背景的组件

所以我的问题是什么事实上我真正的代码看起来非常不同我只是在codesandbox中写了一小段代码，这样你就可以理解我的问题，而不是我真正项目中的黄色组件显示了一个带有数据的大型样式化组件

我的问题是，当我想与黄色或红色内容交互时，它们会消失，我想点击位于其中一个组件上的按钮，但是它不起作用，因为它们消失了。我尝试对下拉组件应用@mouseout，但是在这种情况下，代码的架构被破坏了，因为鼠标悬停已经不能正常工作了

我知道我想解释的想法听起来很混乱，但我希望你理解我的问题是代码沙盒中的链接

myothercomponent.vue

<template>
  <div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo
      accusamus quod quis voluptatibus dolor magni, pariatur accusantium fugit
      itaque sint
    </p>
    <button>Button</button>
  </div>
</template>

<script>
export default {
  name: "myOtherComponent",
};
</script>

<template>
  <div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo
      accusamus quod quis voluptatibus dolor magni, pariatur accusantium fugit
      itaque sint
    </p>
    <button>Button</button>
  </div>
</template>

<script>
export default {
  name: "MyFirstComponent",
};
</script>

<template>
  <div>
    <div style="display: flex; justify-content: center">
      <div v-bind:key="index" v-for="(girl, index) in girls">
        <img
          style="width: 200px; height: 200px; margin: 5px"
          @mouseover="mouseOver(girl)"
          @mouseout="mouseout(girl)"
          v-bind:src="girl.imgSrc"
          alt="Snow"
        />
      </div>
    </div>

    <div v-for="(girl, index) in girls" v-bind:key="index">
      <slide-y-up-transition>
        <component
          v-show="girl.hovered"
          v-bind:is="girl.componentName"
        ></component>
      </slide-y-up-transition>
    </div>
  </div>
</template>

<script>
import { SlideYUpTransition } from "vue2-transitions";
import MyFirstComponent from "./colors/myycomponent";
import myOtherComponent from "./colors/myothercomponent";
export default {
  name: "HelloWorld",
  components: {
    MyFirstComponent,
    myOtherComponent,
    SlideYUpTransition,
  },
  data() {
    return {
      componentNames: ["MyFirstComponent", "myOtherComponent"],
      girls: [
        {
          imgSrc: "https://html5css.ru/css/img_lights.jpg",
          hovered: false,
          hoverColor: "#337700",
          componentName: "MyFirstComponent",
        },
        {
          imgSrc: "https://html5css.ru/css/img_lights.jpg",
          hovered: false,
          hoverColor: "#123456",
          componentName: "myOtherComponent",
        },
      ],
    };
  },

  methods: {
    mouseOver: function (girl) {
      girl.hovered = true;
    },

    mouseout: function (girl) {
      girl.hovered = false;
    },
  },
};
</script>

我的同僚们都是精英。解释
伏积体
意大利圣城

按钮
导出默认值{
名称：“myOtherComponent”，
};

myycomponent.vue

<template>
  <div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo
      accusamus quod quis voluptatibus dolor magni, pariatur accusantium fugit
      itaque sint
    </p>
    <button>Button</button>
  </div>
</template>

<script>
export default {
  name: "myOtherComponent",
};
</script>

<template>
  <div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo
      accusamus quod quis voluptatibus dolor magni, pariatur accusantium fugit
      itaque sint
    </p>
    <button>Button</button>
  </div>
</template>

<script>
export default {
  name: "MyFirstComponent",
};
</script>

<template>
  <div>
    <div style="display: flex; justify-content: center">
      <div v-bind:key="index" v-for="(girl, index) in girls">
        <img
          style="width: 200px; height: 200px; margin: 5px"
          @mouseover="mouseOver(girl)"
          @mouseout="mouseout(girl)"
          v-bind:src="girl.imgSrc"
          alt="Snow"
        />
      </div>
    </div>

    <div v-for="(girl, index) in girls" v-bind:key="index">
      <slide-y-up-transition>
        <component
          v-show="girl.hovered"
          v-bind:is="girl.componentName"
        ></component>
      </slide-y-up-transition>
    </div>
  </div>
</template>

<script>
import { SlideYUpTransition } from "vue2-transitions";
import MyFirstComponent from "./colors/myycomponent";
import myOtherComponent from "./colors/myothercomponent";
export default {
  name: "HelloWorld",
  components: {
    MyFirstComponent,
    myOtherComponent,
    SlideYUpTransition,
  },
  data() {
    return {
      componentNames: ["MyFirstComponent", "myOtherComponent"],
      girls: [
        {
          imgSrc: "https://html5css.ru/css/img_lights.jpg",
          hovered: false,
          hoverColor: "#337700",
          componentName: "MyFirstComponent",
        },
        {
          imgSrc: "https://html5css.ru/css/img_lights.jpg",
          hovered: false,
          hoverColor: "#123456",
          componentName: "myOtherComponent",
        },
      ],
    };
  },

  methods: {
    mouseOver: function (girl) {
      girl.hovered = true;
    },

    mouseout: function (girl) {
      girl.hovered = false;
    },
  },
};
</script>

我的同僚们都是精英。解释
伏积体
意大利圣城

按钮
导出默认值{
名称：“MyFirstComponent”，
};

HelloWorld.vue

<template>
  <div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo
      accusamus quod quis voluptatibus dolor magni, pariatur accusantium fugit
      itaque sint
    </p>
    <button>Button</button>
  </div>
</template>

<script>
export default {
  name: "myOtherComponent",
};
</script>

<template>
  <div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo
      accusamus quod quis voluptatibus dolor magni, pariatur accusantium fugit
      itaque sint
    </p>
    <button>Button</button>
  </div>
</template>

<script>
export default {
  name: "MyFirstComponent",
};
</script>

<template>
  <div>
    <div style="display: flex; justify-content: center">
      <div v-bind:key="index" v-for="(girl, index) in girls">
        <img
          style="width: 200px; height: 200px; margin: 5px"
          @mouseover="mouseOver(girl)"
          @mouseout="mouseout(girl)"
          v-bind:src="girl.imgSrc"
          alt="Snow"
        />
      </div>
    </div>

    <div v-for="(girl, index) in girls" v-bind:key="index">
      <slide-y-up-transition>
        <component
          v-show="girl.hovered"
          v-bind:is="girl.componentName"
        ></component>
      </slide-y-up-transition>
    </div>
  </div>
</template>

<script>
import { SlideYUpTransition } from "vue2-transitions";
import MyFirstComponent from "./colors/myycomponent";
import myOtherComponent from "./colors/myothercomponent";
export default {
  name: "HelloWorld",
  components: {
    MyFirstComponent,
    myOtherComponent,
    SlideYUpTransition,
  },
  data() {
    return {
      componentNames: ["MyFirstComponent", "myOtherComponent"],
      girls: [
        {
          imgSrc: "https://html5css.ru/css/img_lights.jpg",
          hovered: false,
          hoverColor: "#337700",
          componentName: "MyFirstComponent",
        },
        {
          imgSrc: "https://html5css.ru/css/img_lights.jpg",
          hovered: false,
          hoverColor: "#123456",
          componentName: "myOtherComponent",
        },
      ],
    };
  },

  methods: {
    mouseOver: function (girl) {
      girl.hovered = true;
    },

    mouseout: function (girl) {
      girl.hovered = false;
    },
  },
};
</script>

从“vue2转换”导入{SlideYUpTransition}；
从“/colors/myycomponent”导入MyFirstComponent；
从“/colors/myOtherComponent”导入myOtherComponent；
导出默认值{
名称：“HelloWorld”，
组成部分：{
我的第一部分，
肌肉成分，
滑升过渡，
},
数据（）{
返回{
组件名称：[“MyFirstComponent”、“myOtherComponent”]，
女孩：[
{
imgSrc:“https://html5css.ru/css/img_lights.jpg",
悬停：错，
hoverColor:#337700“，
组件名称：“MyFirstComponent”，
},
{
imgSrc:“https://html5css.ru/css/img_lights.jpg",
悬停：错，
hoverColor:#123456“，
组件名称：“myOtherComponent”，
},
],
};
},
方法：{
鼠标盖：功能（女孩）{
girl.hovered=true；
},
鼠标输出：功能（女孩）{
girl.hovered=false；
},
},
};

若我正确理解了这个问题，尝试将@mouseout事件更改为@mouseleave事件，并检查它是否在您想要的行为中工作：D

<template>
<div>
 <div style="display: flex; justify-content: center">
  <div v-bind:key="index" v-for="(girl, index) in girls">
    <img
      style="width: 200px; height: 200px; margin: 5px"
      @mouseover="mouseOver(girl)"
      v-bind:src="girl.imgSrc"
      alt="Snow"
    />
  </div>
</div>

<div v-for="(girl, index) in girls" v-bind:key="index" @mouseleave="mouseout(girl)">
  <slide-y-up-transition>
    <component
      v-show="girl.hovered"
      v-bind:is="girl.componentName"
    ></component>
  </slide-y-up-transition>
</div>