CSS :悬停不是我期望的工作方式

Question

我有一个属于类.stickyNote的div，在这个div中，我有一个<h1>标记作为stickynote的标题，一个<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>上时，它会出现在前台，而不是整个stickyNote。我遗漏了什么？div作为一个整体。

Answer 1

.stickyNote :hover, .stickyNote :focus{

不是逗号优先

.stickyNote :hover .stickyNote :focus{