如何使用 jQuery/JS 将类添加到非悬停的 div

Question

我有一些接近于我希望它们工作的不同部分。

我有四个 div。根据访问的 URL，我希望一个特定的 div 处于完全透明/活动状态。我希望序列中的下一个 div 同时进出透明动画，以使查看者倾向于访问序列中的下一页/网址。我也有一个悬停状态，所以当 4 个 div 中的任何一个悬停时，那个也应该完全透明。

当我尝试将悬停状态设置为首要规则时，我感到困惑。如果任何 div 悬停，我希望所有其他动画停止，悬停的 div 完全不透明，其他 3 个 div 应该变为半不透明（无论正在访问什么页面等）。

我的代码如下，如果您有任何问题，请告诉我。谢谢！这里还有一个 CodePen 的链接：https://codepen.io/summeropratt/pen/LYpoVYg

HTML

<div class="parent">
  <div class="child div1">
    <h2>Div 1</h2>
  </div>
  <div class="child div2">
    <h2>Div 2</h2>
  </div>
  <div class="child div3">
    <h2>Div 3</h2>
  </div>
  <div class="child div4">
    <h2>Div 4</h2>
  </div>
</div>

CSS

.child {
  opacity: .5;
  transition: .2s;
}
.full-transparency {
  opacity: 1 !important;
  cursor: pointer !important;
}
.click-me-next  {
  animation-name: click-me-next;
  animation-duration: 2s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}
@keyframes click-me-next{
  0% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

JS

// if(window.location.pathname == '/div3-url/') {
  var opacity = $(".div3").css("opacity");
  console.log("opacity", opacity);
  $(".div3").css("opacity", 1);

  var div4 = document.getElementsByClassName("div4")[0];
  div4.classList.add("click-me-next");
// });

$(".child").hover(function() {
    $(this).addClass("full-transparency");
  }, function() {
    $(this).removeClass("full-transparency");
});

Answer 1

只需使用一个类创建一个“更强大”的 CSS 选择器，并在 hover(over, out) 上使用 add 和 remove

$(".child").hover(
  function() {
    $(".child").each(function(i, el) {
      $(el).addClass('hover')
    })
  },
  function() {
    $(".child").each(function(i, el) {
      $(el).removeClass('hover')
    })
  }
)

.child {
  opacity: .5;
  transition: .2s;
}

.full-transparency {
  opacity: 1 !important;
  cursor: pointer !important;
}

.full-transparency.hover {
  opacity: .5 !important;
}

.click-me-next.hover {
  opacity: 1 !important;
  cursor: pointer;
}

.click-me-next {
  animation-name: click-me-next;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes click-me-next {
  0% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="child div1">
    <h2>Div 1</h2>
  </div>
  <div class="child div2">
    <h2>Div 2</h2>
  </div>
  <div class="child full-transparency div3">
    <h2>Div 3</h2>
  </div>
  <div class="child click-me-next div4">
    <h2>Div 4</h2>
  </div>
</div>

Answer 2

问题是，您必须在悬停时回到之前的状态。 所以最简单的方法是添加更多类并根据悬停状态添加/删除它们（请记住，类的顺序很重要）。

我添加了一个类 (click-me-next-pause) 来停止动画，并添加了两个类 (current-active) 和 (current-active-transparent) 来改变状态。

您甚至不需要关键字 (!important)，因为类的顺序很重要。

查看以下示例：

// if(window.location.pathname == '/div3-url/') {
  var opacity = $(".div3").addClass("current-active");
  
  var div4 = document.getElementsByClassName("div4")[0];
  div4.classList.add("click-me-next");
// });

$(".child").hover(function() {
    $(".click-me-next").addClass("click-me-next-pause");
    $(".current-active").addClass("current-active-transparent");
    $(this).addClass("full-transparency");
  }, function() {
    $(this).removeClass("full-transparency");
    $(".click-me-next").removeClass("click-me-next-pause");
    $(".current-active").removeClass("current-active-transparent");
});

.child {
  opacity: .5;
  transition: .2s;
}
.current-active
{
  opacity: 1;
}
.current-active-transparent
{
  opacity: 0.5;
}
.full-transparency {
  opacity: 1 ;
  cursor: pointer;
}
.click-me-next  {
  animation-name: click-me-next;
  animation-duration: 2s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}
.click-me-next-pause{
  animation-iteration-count: 0 ;
  animation-play-state: pause ;
}
@keyframes click-me-next{
  0% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <!-- first child -->
  <div class="child div1">
    <h2>Div 1</h2>
  </div>
  <!-- second child -->
  <div class="child div2">
    <h2>Div 2</h2>
  </div>
  <!-- third child -->
  <div class="child div3">
    <h2>Div 3</h2>
  </div>
  <!-- fourth child -->
  <div class="child div4">
    <h2>Div 4</h2>
  </div>
</div>