将鼠标悬停在容器上并更改嵌套 Div 的 bgcolor？答案

【问题标题】：Hover for Container and change bgcolor of Nested Div?将鼠标悬停在容器上并更改嵌套 Div 的 bgcolor？
【发布时间】：2014-05-30 15:48:44
【问题描述】：

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

我正在尝试做一个悬停代码来影响一个元素（嵌套 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>

【问题讨论】：

我尝试了 > 和 ~ 选择器，但它们不起作用我不知道为什么
div#press:hover > #text {background-color:#fff;}这是你做的吗？
#press:hover > #text {background-color:#fff;} 是我所做的
所以它应该可以工作，除非背景被其他地方的一些更具体的规则覆盖。在这种情况下，请尝试尽可能多地向您的规则添加更多选择器，例如 :root body div#press.middle_bar > div#text {...} 和最后一个解决方案（当我们无法使其足够具体时）使用 !important 标志。
#press 默认带有背景图片('bg.jpg');这实际上会影响代码吗？

标签： html css hover

【解决方案1】：

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

JSFiddle

如果这对您不起作用，可能在其他地方您的 css 选择器比悬停选择器更具特异性，可能是内联样式......（由某些脚本注入......？））也注意!important

【讨论】：

感谢您的提示，确实有一些内联样式，我将它们移到全局 css 中并解决了这个问题！

【解决方案2】：

您需要在<div id="press"></div> 上使用:hover 伪类。此外，您需要使用 > 后代选择器来定位 <div id="text"></div> 子代。

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

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

演示：JSFiddle

【讨论】：