问题描述
我想要的是将鼠标悬停在我的 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 的父级，因为它在语义方面不太正确
buttonbody {
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;
}