Question

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

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

我想要的是当用户将鼠标悬停在div＃press的任何部分时，只有div＃文本应将其背景颜色更改为#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

如果这不适合你，可能在其他地方你有一个比hover选择器更具特异性的css选择器，可能是内联样式......（由一些脚本注入......？））注意!important

Answer 2

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

您应该可以执行以下操作：

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

演示： JSFiddle

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

2 个答案: