求助：实现hover列表项时箭头超出父容器显示的CSS方案

核心思路 #

通过绝对定位+z-index层级控制实现hover时箭头跳出父容器并覆盖的效果：

1. 给列表项（父容器）设置position: relative，作为箭头定位的参照
2. 箭头元素设置position: absolute，初始位置在容器内右侧
3. hover列表项时，调整箭头的right值为负数（超出容器右侧），同时设置z-index确保箭头覆盖父容器及其他元素

修改后的代码示例 #

HTML结构

<div class="list-container">
  <div class="list-item">
    <span class="item-text">列表项内容</span>
    <span class="arrow">→</span>
  </div>
  <div class="list-item">
    <span class="item-text">列表项内容</span>
    <span class="arrow">→</span>
  </div>
</div>

CSS样式

/* 父容器样式 */
.list-container {
  width: 300px;
  margin: 20px;
}

/* 列表项：设置相对定位，允许子元素溢出显示 */
.list-item {
  position: relative;
  padding: 10px 30px 10px 15px;
  margin-bottom: 8px;
  background: #f5f5f5;
  border-radius: 4px;
  transition: all 0.3s ease;
  overflow: visible; /* 关键：避免箭头溢出部分被隐藏 */
}

/* 箭头：初始位置在容器内右侧 */
.arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  transition: right 0.3s ease;
  z-index: 10; /* 确保hover时覆盖父容器 */
}

/* hover状态：箭头移出容器外侧 */
.list-item:hover .arrow {
  right: -15px; /* 负数让箭头超出容器右侧 */
}

/* 可选：hover时列表项背景变化增强交互 */
.list-item:hover {
  background: #e0e0e0;
}

关键说明 #

• overflow: visible：必须给列表项加上，否则箭头溢出部分会被容器截断
• z-index：箭头的层级要高于父容器，避免被其他元素遮挡
• 过渡动画：添加transition属性让箭头移动更平滑，提升交互体验

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