应用 :hover 在父元素 div 但不在子元素上

Question

我想要的是将鼠标悬停在我的 div 上并给它一个框阴影以表明它是可点击的，我有一些内容和里面的一个按钮，它不应该有框阴影。按钮在悬停时放大。我设法在 div 上获得了框阴影，并通过使用 pointer-events:none 删除了内容上的框阴影，但是我无法从按钮上删除阴影，因为它是可点击的并且不能使用 pointer-events:none.是否有 css 唯一的解决方案，如果没有，还有其他解决方案吗？ jsfiddle link->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;
}

Answer 1

你没有像你想的那样使用:hover，选择器和伪class之间的白色space（#container :hover）意味着所有child元素将具有悬停效果，在代码中表示 (#content *:hover)，这就是为什么您具有具有悬停效果的 p 和 button。

您可以删除白色 space 并仅在 #box 和 button 中应用悬停

此外，我建议不要将标题 h5 用作 button 的 parent，因为它在语义方面不太正确

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;
}

<div id="container">
  <div id="box">
    <p>content</p>
    <button class="button">click me!</button>
  </div>
</div>

应用 :hover 在父元素 div 但不在子元素上

Apply :hover on parent div but not on child elements

html

css

css-selectors

pseudo-class