我的 homepage 上有一个旋转木马.当第三个轮播出现时,轮播按钮 div class="rotator-controls"
由于图像占用空间而向下移动。我的目标是让这个 div 与其他 4 个保持相同的高度。这意味着当 <span>
(索引 2)的孙子 div <div class="rotator-pagination">
处于事件状态,我将正确的 css 应用于 <div class="rotator-controls">
(例如底部:60px)。由于轮播是 jQuery 循环 2,当跨度处于事件状态时,它具有类 cycle-pager-active
.
我试过使用 domcontentloaded。即
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(对其祖父元素)?
最佳答案
试试这个
.banner-content-area {
min-height: 440px;
}
如果不起作用,请添加最小高度:440px!重要;
关于javascript - 当幻灯片处于事件状态时将 css 应用于祖 parent div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58749008/