【发布时间】：2012-11-01 20:39:12
【问题描述】：
我有一个属于 .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> 部分总是分别出现在前台，即当我将鼠标悬停在 <h1> 上时，它会出现在前台，而当我将鼠标悬停在<p> 它会出现在前台，但不会出现整个便笺。
我错过了什么？
div 作为一个整体。
【问题讨论】：
-
.stickyNote和:hover之间有一个空格，因此您的 CSS 表示将此样式应用于悬停的.stickyNote的子代。 -
就是留下来。摆脱空间，菜鸟。
-
我确实是个菜鸟。但我没有任何悬停的孩子？？？ （您的解决方案仍然有效）
标签： hover foreground