當幻燈片處於活動狀態時，將 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;
}