vue2 实现多个card，鼠标移到其中一个card上的时候，向右侧展开显示更多信息，其余card收缩

在 Vue.js 中实现这样的效果通常会涉及到组件化和状态管理。你可以创建一个名为 "Card" 的自定义组件，然后给每个卡片添加一些基本样式，如宽度、高度以及默认隐藏的详细信息区域。当鼠标悬停在卡片上时，你可以利用 `v-on` 指令监听 "mouseover" 事件，触发一个显示详细内容的方法。其他未悬停的卡片则需要设置一个全局的变量或者计算属性，来控制它们的状态。

以下是一个简单的示例代码：

<template>
  <div class="cards-container">
    <div v-for="(item, index) in items" :key="index" class="card" @mouseover="showDetails(index)" @mouseout="hideDetails(index)">
      <div class="card-header">{{ item.title }}</div>
      <div class="card-body" v-if="isShowing[index]">{{ item.detail }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 数据数组，包含标题和细节
      isShowing: Array(items.length).fill(false), // 初始时所有卡片详情都隐藏
    };
  },
  methods: {
    showDetails(index) {
      this.isShowing[index] = true; // 展开指定索引的卡片
    },
    hideDetails(index) {
      if (index !== this.currentHoverIndex) { // 只有当前非焦点卡片收起
        this.isShowing[index] = false;
      }
      this.currentHoverIndex = null; // 清除当前聚焦卡片的标记
    },
  },
};
</script>

<style scoped>
.card {
  position: relative;
  width: 200px;
  transition: all 0.3s ease;
}

.card:hover .card-body {
  display: block;
}
</style>

在这个例子中，我们有一个 "items" 数组，当鼠标悬停在每个 `.card` 上，对应的 `.card-body` 区域会通过 `isShowing` 数组中的布尔值显示或隐藏。同时，为了防止其他卡片在鼠标离开当前卡片时也关闭，我们在 `hideDetails` 方法里检查了当前hover的索引是否与之前一样。