根据父元素属性更改元素的 CSS 属性答案

【问题标题】：Change CSS property of element based on parent element property根据父元素属性更改元素的 CSS 属性
【发布时间】：2017-12-28 17:27:42
【问题描述】：

我正在使用js-caurousal 更改工作正常的背景图像。除此之外，我还为每张幻灯片添加了标题，我使用 animation.css 和 wow.js 使用淡入淡出效果制作动画。

我遇到的问题是动画只播放一次，我想在幻灯片活动时播放标题文本的动画。我试图寻找解决方案，但找不到太多。

所以我想从具有slide-caption 类的元素中添加和删除wow fadeIn。

下面是幻灯片的代码

<div class="js-carousel u-carousel-v5" data-autoplay="true" data-infinite="true" data-fade="true" data-speed="4000">
  <div class="js-slide g-bg-img-hero g-height-100vh--md g-min-height-300" aria-hidden="true" style="background-image: url(assets/img/1.jpg);">
    <h3 class="slide-caption wow fadeIn" data-animation="animated fadeIn" data-wow-delay="4s">Image One</h3>
  </div>

  <div class="js-slide g-bg-img-hero g-height-100vh--md g-min-height-300" aria-hidden="true" style="background-image: url(assets/img/2.jpg);">
    <h3 class="slide-caption wow fadeIn" data-animation="animated fadeIn" data-wow-delay="4s">Image Two</h3>
  </div>
</div>

如何使用$( ":hidden").attr( "aria-hidden", "true" ) 在slide-caption 中添加和删除css

【问题讨论】：

你确定不是caurousel 带E
@RokoC.Buljan，我正在使用这个模板htmlstream.com/preview/unify-v2.1/one-pages/wedding/index.html，它有 Carousal 说，但文档没有提到究竟是哪个 carousel
@RokoC.Buljan：甚至是carousel（只有一个u）。
@T.J.Crowder 我什至没有注意到第一个 U... - 所以我已经有一个页面，上面有我见过的所有轮播拼写错误：D

标签： javascript jquery css animation

【解决方案1】：

我认为您应该将其用作 属性选择器 并执行以下操作：

$('div[aria-hidden=false] .slide-caption').removeClass('wow fadeIn');

.wow.fadeIn {
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js-carousel u-carousel-v5"
             data-autoplay="true"
             data-infinite="true"
             data-fade="true"
             data-speed="4000">
<div class="js-slide g-bg-img-hero g-height-100vh--md g-min-height-300" aria-hidden="true" style="background-image: url(assets/img/1.jpg);">
        <h3 class="slide-caption wow fadeIn"  data-animation="animated fadeIn"  data-wow-delay="4s" >Image One</h3>
    </div>

    <div class="js-slide g-bg-img-hero g-height-100vh--md g-min-height-300" aria-hidden="true" style="background-image: url(assets/img/2.jpg);">
        <h3 class="slide-caption wow fadeIn"  data-animation="animated fadeIn"  data-wow-delay="4s" >Image Two</h3>
    </div>
    
    <div class="js-slide g-bg-img-hero g-height-100vh--md g-min-height-300" aria-hidden="false" style="background-image: url(assets/img/2.jpg);">
        <h3 class="slide-caption wow fadeIn"  data-animation="animated fadeIn"  data-wow-delay="4s" >Image Three</h3>
    </div>
</div>

【讨论】：

不适合我我尝试按照两行代码添加和删除类以在幻灯片再次循环时保持动画播放$('div[aria-hidden=false] .slide-caption').removeClass('wow slideInUp'); $('div[aria-hidden=true] .slide-caption').addClass('wow slideInUp animation');
我也使用了wow fadeIn，因为我实际使用了wow slideInUp。它打破了第一张幻灯片本身 2,3 播放的动画，但是当它循环播放时，它不再播放。 wow.js 在动画播放一次后自动添加和删除animation 类。
@Learning 所以我认为这个想法是在 CSS 中添加 !important 属性来覆盖动画并避免它再次循环
我希望在幻灯片处于活动状态时播放动画
@Learning 所以也许你也需要让你的代码自动化......你有没有任何事件处理程序，例如当幻灯片发生变化时，你可以在哪里添加代码？

【解决方案2】：

做造型

.parentProperty1 .childClr {
     color: red;
}

.parentProperty2 .childClr {
     color: blue;
}

Your CSS Selector should be like

【讨论】：