Html 将鼠标悬停在容器上并更改嵌套Div的颜色？

首先感谢你花时间阅读我的问题

我正在尝试使用悬停代码来影响元素（嵌套div的背景色），我找到了一些答案并尝试了它们，但无法使其工作。有没有一种解决方案可以在不使用JS/jQ的情况下实现这一点？这是wordpress循环的一部分，因此使用jquery选择元素可能不是最好的方法。有什么想法吗？谢谢

我想得到的是，当用户将鼠标悬停在div#press的任何部分上时，只有div#文本应该将其背景色更改为#FFF（div#press保持不变）

非常感谢

编辑：似乎在#文本处设置预设背景色会破坏代码？为什么会这样？已附加具有内联样式的新代码

<a href="press.php">
<div id="press" class="middle_bar" style="padding: 200px">
    <div id="text" style="float:left; width: 380px; margin-left: -25px; padding: 20px; background:#999999;">
        <h2>1251515151</h2>
        Published 11111
    </div>
</div>

1251515151
发表于11111年

---

您需要使用

：将
伪类悬停在
上。此外，您还需要使用
子体选择器以
子对象为目标

您应该能够执行以下操作：

#press:hover > #text {
    background-color: #fff;
}

演示：


如果这不适合您，可能在其他地方您有一个比悬停选择器更特殊的css选择器，可能是内联样式。。。（由一些脚本注入…？）还要注意
！重要信息
我已经尝试了>和~选择器，但它们就是不起作用。我不明白为什么
div#press:hover>#text{background color:#fff；}
这是你做的吗？#press:hover>#text{background color:#fff；}是我做的，所以它应该起作用，除非背景被其他地方更具体的规则覆盖。在这种情况下，请尝试尽可能多地向规则中添加更多选择器，例如
：root body div#press.middle_bar>div#text{…}
，最后一个解决方案（当我们无法使其足够具体化时）是使用
！重要信息
flag.#按背景图像的默认值（'bg.jpg'）；这真的会影响代码吗？谢谢你的提示，确实有一些内联样式，我把它们移到了全局css中，并得到了修复！
#press:hover > #text {
    background-color: #fff;
}

#press{
 background:red;
 height:50;
 text-align:center;
}
#text{
 height:50px;
 width:50px;
 background:dodgerblue;
}
#press:hover > #text{
 background:#fff;
}