悬停在父元素上时子元素背景变化

Question

Objective

I want the background color of my <p> (with the class of thumb-caption ) to change when I hover over the parent container.

Background

I have this demo on codepen that has a hover state on the parent and on the <p> but the <p> only changes color when you hover in it directly.

HTML

<div class="system-thumb">
  <a href="https://www.google.com/search?btnG=1&pws=0&q=why+is+juan+so+awesome&gws_rd=ssl" target="_blank">                            
    <p><img src="http://placehold.it/360x180"><p>
    <h2>Product</h2>                            
    <p class="thumb-caption">You should totally buy this product, yay!</p>
  </a>
</div>

CSS

.system-thumb {
  margin: 0 auto;
  max-width: 360px;
}
.system-thumb:hover {
  outline: 1px dotted #00aba7;
}
.system-thumb .thumb-caption {
  margin: 0;
  padding: 10px 5px;
}
.system-thumb .thumb-caption:hover {
  background-color: #00aba7;
  color: #fff;
}
.system-thumb p img {
  max-width: 100%;
}

Answer 1

Simple, apply the :hover psuedo-class to the parent element:

.system-thumb:hover p {
    background-color: #00aba7;
}

Answer 2

Before:

.system-thumb .thumb-caption:hover {
  background-color: #00aba7;
  color: #fff;
}

After:

.system-thumb:hover .thumb-caption {
  background-color: #00aba7;
  color: #fff;
}

You need to assign who's going to have the event. In this case, <p> will be affected only if its parent is hovered. So, you need to move the :hover element to the parent selector.

Answer 3

Select the child ( .thumb-caption ) when it's hovered ( .system-thumb:hover )

.system-thumb:hover .thumb-caption {
    /* Your css codes*/
}

That's simple.