CSS :hover div elements

Question

My css: .sec-hover :hover {background:pink;}

My div:<div class="sec-hover"><h2>heading</h2><p>paragraph</p></div>

With this code, the whole div does not hover in pink. On hover the h2 and p elements hover pink separately. How do I get the whole div to hover pink?

codepen: [1]: http://codepen.io/cboy/pen/GWgOGa

Answer 1

Try This ! Used proper syntax ;

.sec-hover:hover{
background:pink;
color:white;
}

<div class="sec-hover">
  <h2>heading</h2>
  <p>paragraph</p>
</div>

Answer 2

Use background-color

.sec-hover:hover{
background-color: pink 
}

<div class="sec-hover"><h2>heading</h2><p>paragraph</p></div>

Answer 3

No space before colon : , Try this :

.sec-hover:hover{
background: pink 
}