应用：悬停在父 div 上，但不悬停在子元素上

如何解决应用：悬停在父 div 上，但不悬停在子元素上

我想要的是将鼠标悬停在我的 div 上并给它一个框阴影以表明它是可点击的，我有一些内容和一个按钮，里面不应该有框阴影。按钮在悬停时放大。我设法在 div 上获得了 Box-shadow 并使用 pointer-events:none 删除了内容上的 Box-shadow，但是我无法从按钮中删除阴影，因为它是可点击的，并且不能使用 pointer-events:none。是否有任何仅 css 的解决方案，如果没有，还有其他解决方案吗？ jsfiddle 链接->https://jsfiddle.net/uzq13s47/1/

<!DOCTYPE html>
<html>

<head>
    <title>Parcel SandBox</title>
    <Meta charset="UTF-8" />
</head>
<link rel="stylesheet" href="./src/styles.css"/>
<body>
    <div id="container">
        <div id="Box">
            <p>content</p>
            <h5><button>click me!</button></h5>
        </div>
    </div>
</body>

</html>

body {
  font-family: sans-serif;
}
#Box {
  background-color: cyan;
  border-radius: 10px;
  height: 200px;
  width: 200px;
}
p {
  pointer-events: none;
}
#container :hover {
  Box-shadow: 0 1px 5px rgb(137,137,138);
}
h5 :hover {
  transform: scale(1.2);
  transition-duration: 0.5s;
}

解决方法

您没有按照自己的意愿使用 :hover，选择器和伪类之间的空白 (#container :hover) 这意味着所有子元素都将具有悬停效果，在代码中意味着 ({{1 }})，这就是为什么您拥有带有悬停效果的 #content *:hover 和 p。

您可以删除该空白区域并仅在 button 和 #box 中应用悬停

另外，我建议不要使用标题 button 作为 h5 的父级，因为它在语义方面不太正确

button

body {
  font-family: sans-serif;
}

.button {
  width: 60px;
  height: 60px;
}

#box {
  background-color: cyan;
  border-radius: 10px;
  height: 200px;
  width: 200px;
}

#box:hover {
  box-shadow: 0 1px 5px rgb(137,137,138);
}

button:hover {
  transform: scale(1.2);
  transition-duration: 0.5s;
}