如何使用jQueryJS为非悬空的divs添加一个类

Question

我有几件不同的作品，接近于我想要的工作方式。

我有四个div。根据所访问的URL，我希望一个特定的div是完全透明的。我希望序列中的下一个div同时进入和退出透明状态，以使浏览者感觉愿意访问序列中的下一个页面url。我也有一个悬停状态，所以当4个div中的任何一个被悬停时，那个div也应该进入全透明状态。

当我试图将悬停状态作为最重要的规则时，我感到很困惑。如果任何一个divs被悬停，我想让所有其他动画停止，被悬停的divs进入全透明状态，而其他3个divs应该进入半透明状态（不管正在访问哪个页面，等等）。

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

超文本标记语言

<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选择器，并添加一个类，就可以了。add 和 remove 该 hover(over, out)

$(".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

问题是，你必须在hover-out时回到之前的状态。所以最简单的方法是增加几个类，然后根据悬停状态来删除它们（请记住，类的顺序很重要）。

我添加了一个类(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>