如何为父div设置hover阴影，避免内部可点击按钮等子元素触发该效果？

问题核心原因 #

之前的代码出现按钮自带阴影的问题，根本不是pointer-events属性的限制，是CSS选择器写法出错了：
原代码里的#container :hover是带空格的后代选择器，规则为：只要是#container下的后代元素被鼠标悬停，这个元素自身就会被添加上box-shadow。差一个空格的选择器逻辑天差地别——如果没有空格，#container:hover才是选#container本身，有空格就是选所有后代元素。这种写法下，不管是p标签、h5标签、还是按钮，只要鼠标移到上面，这些元素自己都会触发阴影样式，自然没法靠禁用按钮的指针事件解决——毕竟按钮本身是可交互的，本来就不能禁用事件。

修正逻辑 #

只需要把阴影的触发规则从「所有后代元素悬停时自己加阴影」，改成「父元素#box本身被悬停时，仅给#box自己加阴影」，就能完全满足需求，不需要改动按钮的可点击属性，也不需要给内部元素强制设置pointer-events: none：

• 将阴影触发的选择器替换为#box:hover，替代原来的#container :hover
  这套规则下，无论鼠标是悬停在#box的文字上、还是悬停在内部的按钮上，阴影只会被应用到外层的#box元素本身，内部所有子元素完全不会触发阴影样式
• 之前给p标签设置的pointer-events: none在这套逻辑下可以直接删除，不会影响#box的悬停触发
• 原有的按钮放大逻辑可以完整保留，只需要把选择器写得更精准即可

可直接使用的样式代码 #

body {
  font-family: sans-serif;
}
#box {
  background-color: cyan;
  border-radius: 10px;
  height: 200px;
  width: 200px;
  /* 给阴影加过渡效果，交互更自然 */
  transition: box-shadow 0.2s ease;
}
/* 修正：仅#box本身悬停时添加阴影，不波及内部子元素 */
#box:hover {
  box-shadow: 0 1px 5px rgb(137, 137, 138);
}
/* 精准匹配按钮的悬停放大效果 */
h5 button:hover {
  transform: scale(1.2);
  transition-duration: 0.5s;
}

实际效果匹配 #

• 鼠标进入#box的整体区域时，#box会显示阴影，清晰标识可点击状态
• 阴影仅属于外层#box，内部的文字、按钮不会单独出现阴影
• 鼠标悬停到按钮上时，按钮会正常放大、保持点击交互，完全不会触发额外阴影

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