大佬教程收集整理的这篇文章主要介绍了应用：悬停在父 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 的父级，因为它在语义方面不太正确
以上是大佬教程为你收集整理的应用：悬停在父 div 上，但不悬停在子元素上全部内容，希望文章能够帮你解决应用：悬停在父 div 上，但不悬停在子元素上所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。