如何让Vuetify Slide Group左右箭头仅hover时显示在卡片上方且不占额外空间

要让Slide Group的左右箭头覆盖在卡片上方且不占用额外空间，核心是通过绝对定位将箭头脱离文档流，配合容器的相对定位控制位置，具体实现如下：

步骤1：保留现有HTML结构（已包含自定义类slide-group） #

<v-slide-group show-arrows class="my-3 slide-group">
   <v-slide-group-item v-for="(item, index) in topPicks" :key="index" v-slot="{ toggle, selectedClass }">
            <AddToCart
              :item="item"
              :class="[selectedClass]"
              @click="toggle"
              @add-to-cart="store.action.addToCart(item.id)"
            />
  </v-slide-group-item>
 </v-slide-group>

步骤2：覆写CSS样式 #

在你的样式文件或组件的<style>标签中添加以下代码：

/* 给容器设置相对定位，作为箭头的定位参考 */
.slide-group {
  position: relative;
  /* 可选：添加左右内边距，避免卡片边缘被箭头遮挡 */
  padding-left: 32px;
  padding-right: 32px;
}

/* 定位左箭头 */
.slide-group .v-slide-group__prev {
  position: absolute;
  left: 0;
  top: 50%;
  /* 垂直居中箭头 */
  transform: translateY(-50%);
  /* 确保箭头在卡片上方 */
  z-index: 10;
  /* 可选：优化箭头样式，比如半透明背景提升可读性 */
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
}

/* 定位右箭头 */
.slide-group .v-slide-group__next {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
}

/* 可选：重置箭头默认的外边距，避免布局干扰 */
.slide-group .v-slide-group__prev,
.slide-group .v-slide-group__next {
  margin: 0;
}

关键说明 #

• position: relative：为箭头的绝对定位提供参考坐标系，确保箭头相对于容器定位。
• position: absolute：让箭头脱离正常文档流，不再占用额外水平空间。
• transform: translateY(-50%)：实现箭头的垂直居中对齐。
• z-index: 10：确保箭头层级高于卡片内容，避免被卡片遮挡。
• 可选的内边距和背景样式：根据你的UI设计调整，提升箭头的可用性和美观度。

内容的提问来源于stack exchange，提问作者Prayush Jain