CSS/HTML |容器/ 分组 CSS 样式并在一个 div 中使用 & :hover

Question

我有以下 CSS：

.bckgrnd_150 {
     background: rgba(0, 0, 0, 0.5);
     width: 150px;
     height: 100px;
     transition-duration: 2s;
}

.bckgrnd_150:hover {
     background: rgba(255, 255, 255, 0.98);
}

.bckgrnd_150 .wp {
     color: white;
}

.bckgrnd_150 .wp:hover {
     color: black;

}

由于我是这门课的初学者，我需要帮助。我想使用整个代码（上）并将其应用于一个或更简单的代码：当我将鼠标悬停在 .bckgrnd_150 类（作为背景的样式框）上时，它将应用于 div 内的所有内容。

有 HTML：

<div class="bckgrnd_150">
    <img alt="" src="http://files.tado-hamann.webnode.com/200001010-bd155be2cb/appbar.download.png" style="border-width: 0px; border-style: solid; margin: 0px; width: 25px; height: 25px;">
    <p class="wp">blahblah</p>
</div>

所以你可以看到 (http://jsfiddle.net/5d4yyp9p/) 悬停在一个框上，但不影响 .bckgrnd_150 .wp 类（文本）。 我想帮忙；当我将鼠标悬停在一个框上时，它也会影响文本 :hover （因为我现在需要将鼠标悬停在文本上才能影响他）。

真的很抱歉，我是新人。 :)

Answer 1

你可以使用：

.bckgrnd_150:hover .wp {
  color: black;
}

代替

.bckgrnd_150 .wp:hover {
  color: black;        
}

通过悬停父元素，它也将应用于子元素。

jsFiddle here.