轮播图光标仅下半部分显示 pointer指针部分区域hover不生效

问题原因及解决方案 #

这种局部区域无法触发hover光标效果，基本都是层叠元素遮挡、子元素样式继承异常、交互区域偏移三类原因导致，可按以下步骤排查修复：

• 先排查层叠元素遮挡：打开浏览器开发者工具（F12），用元素选择器点选图片上半部分无法触发指针光标的区域，确认选中的元素是否为预期的图片元素或.carousel-box容器。如果选中的是轮播指示器、导航按钮、透明占位层这类层级更高的元素，给这类遮挡元素添加pointer-events: none;属性即可，让鼠标事件直接穿透到下层的图片区域。
• 修复子元素样式继承问题：你目前仅给父容器.carousel-box设置了cursor: pointer，如果JS插入的图片、轮播项子元素单独设置了cursor: default或者pointer-events: none，会覆盖父容器的样式，可补充以下样式：

/* 让容器内所有子元素都继承指针光标配置 */
.carousel-box * {
  cursor: pointer;
  pointer-events: auto;
}
/* 保证图片填满轮播项区域 */
.carousel-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

• 排查交互区域偏移问题：如果内部轮播项设置了负margin、相对定位偏移，会导致元素的可视区域和实际可交互区域不匹配，可在开发者工具的元素面板查看对应元素的盒模型，确认高亮的交互区域和图片可视区域完全重合即可。

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