html - 将鼠标悬停在 Container 上并更改 Nested Div 的 bgcolor？

Question

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

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

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

<a href="press.php">
    <div id="press" class="middle_bar">
        <div id="text">
            <h2><?php the_title(); ?></h2>
            Published <?php the_time('j F Y') ?>
        </div>
    </div>
</a>

非常感谢!

编辑:似乎在#text 处设置预设背景颜色会破坏代码？发生这种情况的任何原因？已附加带有内联样式的新代码

<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>

Answer 1

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

JSFiddle

如果这对您不起作用，那么您可能在其他地方有一个比悬停选择器更具体的 css 选择器，可能是内联样式...(由某些脚本注入(inject)...？))也注意 !important