Search code examples
hoverforeground

CSS :hover not working the way I expect

I have a div which belongs to the class .stickyNote and within that div I have a <h1> tag as the title of the stickyNote and a <p> tag as the contents of the stickynote. Just like so: <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>-->

The stickyNote class is styled so that when one hovers over it, it will come a little more to the foreground, with this 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;  
 }

However, when I hover over the stickyNote div the <h1> and the <p> section always come to the foreground seperately, i.e. when I hover over the <h1> it will come to the foreground and when I hover over the <p> it will come to the foreground, but never the whole stickyNote. What am I missing? div as a whole.

Solution 
  • .stickyNote :hover, .stickyNote :focus{

    not comma first

    .stickyNote :hover .stickyNote :focus{