When hovering over one of two images, a specific component is displayed. Hovering over the first image reveals a component with a red background, while hovering over the second image reveals a component with a yellow background.
My actual code differs greatly from this example. In my real project, instead of a simple yellow component, a complex stylized component with data is displayed. The issue I'm facing is that when I try to interact with the red or yellow components, they disappear. I want to be able to click on a button within these components, but due to their vanishing act, it's impossible. I experimented with applying @mouseout to the dropdown components, but it messed up the code structure as the mouse hover functionality was already faulty.
I know my explanation might be unclear, but I hope you can grasp my problem. Here's the link to my project on CodeSandbox for reference.
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>