html - 悬停在父元素上时子元素背景发生变化

Question

目标

我想要我的 <p> 的背景颜色(具有 thumb-caption 类)在我将鼠标悬停在父容器上时更改。

背景

我有这个demo on codepen在父级和 <p> 上有悬停状态但是 <p>仅当您直接将鼠标悬停在其中时才会改变颜色。

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

很简单，将 :hover 伪类应用于父元素:

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