将鼠标元素背景更改为悬停在父级上方

Question

目的

当我将鼠标悬停在父容器上时，我想要更改<p>（类thumb-caption）的背景颜色。

背景

我有demo on codepen这个{{3}}在父级和<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;
}

Answer 2

在：

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

后：

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

您需要指定谁将参加活动。在这种情况下，<p>仅在其父级悬停时才会受到影响。因此，您需要将:hover元素移动到父选择器。

Answer 3

选择孩子（.thumb-caption）何时悬停（.system-thumb:hover）

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

这很简单。