Vue JS悬停问题

Question

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

我的问题是什么？事实上，我的真实代码看起来很不一样。我只是在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>

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: "MyFirstComponent",
};
</script>

HelloWorld.vue

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

Answer 1

如果我正确理解问题，请尝试将@mouseout事件更改为@mouseleve事件，并检查它是否在您想要的行为中工作：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>

此外，我认为如果你想悬停在下一张图片上，你应该隐藏其他颜色的块，比如

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