css - 将鼠标悬停在另一个元素上时为一个元素设置动画

Question

在下面的代码中，当我将鼠标悬停在一片叶子上时，我试图让火车票旋转。

当我将鼠标悬停在火车票上时，我可以让火车票旋转，但当我将鼠标悬停在树叶上时，则不能。 谁能看出我写的有什么问题？

在我的 CSS 文件中:

#leaf{
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
     -ms-transition: all 1s ease;
    transition: all 1s ease;
    }
#leaf:hover ~ #trainticket {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    rotate(90deg) scale(1.5) skew(45deg) translate(0px);
    -webkit-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
    -moz-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
    -o-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
    -ms-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
    }

#trainticket{
    display:block;
    position: fixed;
    left:0px;
    bottom:0px;
    width: 350px;
    height: 175px;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

#trainticket:hover{
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    rotate(90deg) scale(1.5) skew(45deg) translate(0px);
    -webkit-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
    -moz-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
    -o-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
    -ms-transform: rotate(90deg) scale(1.5) skew(0deg) translate(0px);
    }

在我的 HTML 文件中:

    <div>
      <a target="bio" href="bio1.html">
      <img ID="leaf" src="leaftrans1.png" 
      style="position:absolute;
      display:block;
      top: 30px; 
      left: 30px; 
      width:10%; 
      height:10%;"></a>

    <div>
      <img ID="trainticket" src="current-train-ticket.jpg">
   </div>

</div>

Answer 1

一般来说，当你想做复杂的动画时，你应该考虑使用JavaScript(例如jQuery)。将鼠标悬停在另一个元素上时触发动画非常复杂，需要考虑使用 jQuery:我认为 CSS 不是处理此类内容的正确工具(至少目前如此)，您最终可能会使用很多实现这一目标并使其与所有浏览器兼容的技巧。