CSS/HTML |容器/分组CSS样式并在一个div&；中使用：悬停

我有以下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>

blahblah

如您所见，将（）悬停在一个框上可以工作，但不会影响.bckgrnd_150.wp类（text）。 我愿意帮忙；当我将鼠标悬停在一个框上时，它也会影响text:hover（因为我现在需要将鼠标悬停在text上才能影响他）

真的很抱歉，我是新来的。：）

您可以使用：

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

而不是

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

与悬停父元素一样，它也将应用于子元素

---

是的，当背景类悬停在上方时，需要将其作为目标，然后将颜色应用于wp类+1.感谢您的解答和解释。这很有效，谢谢。*解决*