vue2 中实现 当鼠标悬停在div时显示某div

在 Vue.js 2.x 中，你可以利用 Vue 的响应式特性以及 CSS 的 `:hover` 伪类来实现这个功能。这里是一个简单的示例，假设你有一个包含两个组件的结构，一个父组件（`ParentComponent.vue`）拥有一个子组件（`ChildComponent.vue`），子组件的某个 div 需要在父组件的 div 上鼠标悬停时显示：

**ParentComponent.vue**

<template>
  <div class="parent-div">
    <child-component :show-child-on-hover="hoverState"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      hoverState: false,
    };
  },
  methods: {
    onMouseHover() {
      this.hoverState = true;
    },
    onMouseLeave() {
      this.hoverState = false;
    },
  },
  mounted() {
    // 添加鼠标悬停事件监听
    document.addEventListener('mouseover', this.onMouseHover);
    // 添加鼠标离开事件监听
    document.addEventListener('mouseleave', this.onMouseLeave);
  },
  beforeDestroy() {
    // 移除事件监听，防止内存泄漏
    document.removeEventListener('mouseover', this.onMouseHover);
    document.removeEventListener('mouseleave', this.onMouseLeave);
  },
};
</script>

**ChildComponent.vue**

<template>
  <div v-if="parent.hoverState" class="child-div">
    <!-- 子元素内容 -->
  </div>
</template>

<script>
export default {
  props: ['showChildOnHover'],
};
</script>

在这个例子中，当用户将鼠标悬停在 `.parent-div` 上时，`onMouseHover` 方法会被触发，更新 `hoverState` 为 `true`，进而显示子组件的 `.child-div`。反之，当鼠标离开 `.parent-div` 时，`onMouseLeave` 方法会使 `hoverState` 回到 `false`，隐藏 `.child-div`。