Question

对此我是陌生的，我被困在一个项目上。当您将鼠标悬停在另一个元素上时，我试图获取动画以使图像显示在页面上。

我已经可以使用动画了，但是我不知道是如何首先使图像不可见，以及在将上述元素悬停在h4元素上时，导致动画开始播放。

我已经尝试了所有可以想到的内容，并阅读了与此相关的其他几篇文章，但没有运气。我认为可能必须增加职位（绝对或相对），但我不确定。

这是该部分的CSS，没有任何悬停功能：

.timeline-img {
    visibility: hidden;
}

.hovered:hover + p + .timeline-img {
    animation: 7s alternate slideIn;
    transition: all .2s;
    visibility: visible;
}  

.hovered:hover:after + p + .timeline-img {
    visibility: visible;
}

@keyframes slideIn {
    from {
      margin-left: 100%;
      width: 300%; 
      opacity: 0;
    }
  
    to {
      margin-left: 0%;
      width: 100%;
      opacity: 1;
    }
  }

<div class="content">
   <h4 class="hovered">Shepherds discovered coffee in Ethiopia circa 800 A.D.</h4>
   <p>Legend has it that 9th century goat herders noticed the effect caffeine had on their goats, who appeared to "dance" after eating coffee berries. A local monk then made a drink with coffee berries and found that it kept him awake at night, thus the original cup of coffee was born.</p>
  <div class="timeline-img">
    <img src="shepherd.jpg" alt="Shepherd" class="fact-img">
  </div>
</div>

感谢任何能帮助我的人，请解释一下，因为我对此仍然很陌生。

Answer 1

您可以执行以下操作：

语法非常简单：只有两个或多个选择器，由加号（+）分隔。最简单的构造是两个元素之间有一个加号。了解更多：Adjacent-Sibling Selector

.content h4:hover + p + .timeline-img{
    animation: 7s alternate slideIn;
    transition: all .2s;
}
@keyframes slideIn {
    from {
      margin-left: 100%;
      width: 300%; 
      opacity: 0;
    }
  
    to {
      margin-left: 0%;
      width: 100%;
      opacity: 1;
    }
  }

<div class="content">
   <h4 class="hovered">Shepherds discovered coffee in Ethiopia circa 800 A.D.</h4>
   <p>Legend has it that 9th century goat herders noticed the effect caffeine had on their goats, who appeared to "dance" after eating coffee berries. A local monk then made a drink with coffee berries and found that it kept him awake at night, thus the original cup of coffee was born.</p>
 <div class="timeline-img">
    <img src="shepherd.jpg" alt="Shepherd" class="fact-img">
  </div>
</div>

Answer 2

在此示例中，

我们在目标同级（body div Header goes here button(onclick= user ? "logout()" : "login()")= user ? "Logout" : "Login" block content）类上设置了:hover伪类。
- 即~
然后，我们在标准+悬停状态项上使用.hovered:hover ~ .timeline-img属性。
- animation-play-state
- animation-play-state: paused

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

animation-play-state: running

.timeline-img {
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
  /* necessary */
  -webkit-animation: 2s alternate slideIn;
          animation: 2s alternate slideIn;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  /* Optional */
  -webkit-animation-iteration-count: 2;
          animation-iteration-count: 2;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.hovered:hover ~ .timeline-img {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

@-webkit-keyframes slideIn {
  from {
    margin-left: 100%;
    width: 300%;
    opacity: 0;
  }
  to {
    margin-left: 0%;
    width: 100%;
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    margin-left: 100%;
    width: 300%;
    opacity: 0;
  }
  to {
    margin-left: 0%;
    width: 100%;
    opacity: 1;
  }
}

.red {
  background: red;
  height: 50px;
  width: 50px;
  border-radius: 100%
}

Answer 3

尝试一次。

.timeline-img{
    transition: all .2s;
    animation: 7s alternate slideIn;
    animation-play-state: paused;  
} 

.hovered:hover ~ .timeline-img{
  animation-play-state:running;
}

@keyframes slideIn {
    from {
      margin-left: 100%;
      width: 300%; 
      opacity: 0;
    }
  
    to {
      margin-left: 0%;
      width: 100%;
      opacity: 1;
    }
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
   <h4 class="hovered">Shepherds discovered coffee in Ethiopia circa 800 A.D.</h4>
   <p>Legend has it that 9th century goat herders noticed the effect caffeine had on their goats, who appeared to "dance" after eating coffee berries. A local monk then made a drink with coffee berries and found that it kept him awake at night, thus the original cup of coffee was born.</p>
  <div class='timeline-img'>
    <img src="shepherd.jpg" alt="Shepherd" class="fact-img">
  </div>
</div>

将鼠标悬停在另一个元素上即可触发一个元素上的动画

3 个答案: