当幻灯片处于活动状态时，将 css 应用于祖父母 div

Question

我的主页上有一个轮播。 当第三个轮播出现时，轮播按钮div class="rotator-controls"由于图像占用空间而向下移动。 我的目标是保持这个 div 与其他 4 个相同的高度。这意味着当孙子 div <div class="rotator-pagination">的<span> （索引 2）处于活动状态时，我应用正确的 css到<div class="rotator-controls"> （例如底部：60px）。 由于轮播是 jQuery 周期 2，当跨度处于活动状态时，它具有 class cycle-pager-active 。

我尝试过使用 domcontentloaded。 IE

document.addEventListener("DOMContentLoaded", function() {
var span = document.querySelector("#homepage-rotator > div.banner.cycle-slide.cycle-slide-active > div > div.banner-content-area > div.rotator-controls > div.rotator-pagination").children[2];

if (jQuery(span).hasClass("cycle-pager-active")){
var grandPDiv = document.querySelector("div.rotator-controls");
grandPDiv.style.bottom = "-60px";
}
});

这不起作用。 但是，如果我在控制台中执行此操作，并等待第三个轮播激活，则使用jQuery(span).hasClass("cycle-pager-active")返回true 。 仅当 span 元素处于活动状态时，我如何应用 css （对其祖父元素）？

Answer 1

尝试这个

.banner-content-area {
    min-height: 440px;
}

如果不起作用，则添加 min-height: 440px;important;

Answer 2

这完美地工作：

.banner-content-area {
    min-height: 440px;
}