CSS旋转轮盘前5个切片hover不生效及添加切片边框问题咨询

问题1：前5个切片hover失效解决 #

原因 #

所有.hold元素的z-index统一设为1，DOM结构中后声明的元素堆叠顺序天然高于先声明的元素，后面7个.hold的透明区域覆盖了前5个切片的可交互区域，导致hover事件无法被捕获。

解决方法（二选一即可） #

• 方案1（推荐，无需逐个修改元素属性）：给.hold关闭鼠标事件拦截，仅给实际扇形区域开启事件响应

.hold {
  position: absolute;
  width: 800px;
  height: 800px;
  clip: rect(0px,800px,800px,400px);
  z-index: 1;
  pointer-events: none; /* 新增该行 */
}

.Wheel {
  position: absolute;
  width: 800px;
  height: 800px;
  clip: rect(0px,400px,800px,0px);
  border-radius: 400px;
  border: 2px solid #f2e0be;
  cursor: pointer;
  pointer-events: auto; /* 新增该行 */
}

• 方案2：按DOM顺序给1-12号.hold设置从高到低的z-index，例如#One{z-index:12}、#Two{z-index:11}依次递减，保证先声明的扇形不会被后声明的元素遮挡

问题2：扇形侧边边框实现方案 #

无需新增虚拟div，使用当前元素的内置伪元素::before/::after即可实现，性能和可维护性更高：

实现思路 #

1. 给.Wheel开启相对定位作为伪元素的定位容器
2. 两个伪元素分别作为左右侧边边框，宽度设为需要的边框厚度，高度等于轮盘半径，定位到圆心位置，分别旋转0度和30度对齐扇形的两个侧边

代码实现 #

.Wheel {
  position: absolute;
  width: 800px;
  height: 800px;
  clip: rect(0px,400px,800px,0px);
  border-radius: 400px;
  border: 2px solid #f2e0be;
  cursor: pointer;
  pointer-events: auto;
}
/* 新增伪元素实现侧边边框 */
.Wheel::before, .Wheel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 400px;
  background-color: #f2e0be;
  transform-origin: bottom center;
}
.Wheel::after {
  transform: rotate(30deg); /* 匹配单扇形30度的夹角 */
}

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