如何通过外层Div实现Button的鼠标悬停Help光标效果（CSS）

问题根源在于按钮元素默认带有cursor: pointer样式，会覆盖父容器的cursor设置，因此只有鼠标落在容器未被按钮覆盖的边缘区域时，才会触发help光标。以下是两种基于现有Div结构的可行方案：

方案一：容器hover时为内部按钮设置光标 #

利用容器的hover伪类结合后代选择器，定位到目标按钮并修改其光标样式，实现“悬停时显示help”的需求：

.container {
  width: 400px;
  border: solid 1px black;
  height: 400px;
}

/* 容器hover时，为直接子元素按钮设置help光标 */
.container:hover > button {
  cursor: help;
}

.button {
  width: 100%;
  height: 100%;
}

• 使用>选择直接子元素，确保仅定位到容器内的目标按钮，避免影响其他层级的按钮；如果按钮不是容器的直接子元素，移除>使用普通后代选择器即可。

方案二：让按钮继承容器的光标样式 #

如果希望鼠标进入容器范围（包括按钮区域）就显示help光标，可让按钮继承容器的cursor属性，覆盖其默认的pointer样式：

.container {
  width: 400px;
  border: solid 1px black;
  height: 400px;
  cursor: help;
}

.container button {
  cursor: inherit; /* 继承父容器的光标设置 */
  width: 100%;
  height: 100%;
}

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