Vue JS 悬停问题

Question

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

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

我的问题是，当我想与黄色或红色内容交互时，它们消失了我想单击位于这些组件之一上的按钮，但它不起作用，因为它们消失了我尝试应用@mouseout 用于下拉组件，但在这种情况下代码的体系结构被破坏，因为鼠标悬停已经不正确

我明白我想解释的想法听起来很混乱，但我希望你能理解我这里的问题是codesandboxmy project中的link

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 事件更改为@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>

此外，我认为如果您想将鼠标悬停在下一张图片上，您应该隐藏其他彩色块，例如

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

Vue JS 悬停问题

Vue JS hover problems

javascript

vue.js

vue-component

vuejs2