我有一个属于 .stickyNote 类的 div，在该 div 中我有一个<h1>标签作为便笺的标题和一个<p>标签作为便笺的内容。就像这样：<div class="stickyNote">
<h1>Drag Me</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum..</p>
</div>-->
stickyNote 类的样式是这样的，当一个人将鼠标悬停在它上面时，它会更靠近前台，使用这个 CSS：
.stickyNote :hover,.stickyNote :focus{
-moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
-webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
box-shadow:10px 10px 7px rgba(0,0,0,.7);
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
position:relative;
z-index:5;
}
但是，当我将鼠标悬停在 StickyNote div 上时<h1>，该<p>部分总是单独出现在前台，即当我将鼠标悬停在div 上时<h1>，它将出现在前台，当我将鼠标悬停在 div 上时<p>，它将出现在前台，但绝不是整个 stickyNote . 我错过了什么？div 作为一个整体。