Question

我有一个属于类.stickyNote的div，在该div中我有一个<h1>标签作为stickyNote的标题，一个<p>标签作为stickynote的内容。就像这样：<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作为一个整体。

Answer 1

.stickyNote :hover, .stickyNote :focus{

首先不是逗号

.stickyNote :hover .stickyNote :focus{

CSS：悬停不按我期望的方式工作

1 个答案: