Css 悬停在另一个元素上时设置一个元素的动画

在下面的代码中，当我将鼠标悬停在树叶上时，我试图使火车票旋转

我可以让火车票在我悬停在它上面的时候旋转，但当我悬停在叶子上的时候就不行了。 有人能看出我写的有什么不对吗

在我的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>

一般来说，当你想做复杂的动画时，你应该考虑使用JavaScript（例如jQuery）。当一个元素在另一个元素上悬停时，触发一个动画就足够复杂了，可以考虑使用jQuery：在我看来，CSS并不是这类东西的正确工具（至少在目前的情况下）。您可能会使用大量的黑客来实现这一点，并使其与所有浏览器兼容。
请注意，
#leaf
和
#trainticket
不是兄弟。考虑到给定的标记，您可以使用
a[href=“bio1.html”]：hover+div>#trainticket
选择器。实际上，问题与所使用的选择器有关，而不是CSS
转换
。这实际上是一个“元答案”，根本没有回答我必须承认的问题。我只是想提醒OP在CSS中使用transition，这并不总是最好的解决方案，因为它非常棘手，而且在某些浏览器中缺乏支持。jQuery通常是一个更好的解决方案，因为它处理浏览器兼容性本身不会造成太多性能损失（即，如果可用，它将使用CSS3转换），同时保持简单。您应该继续并将您的答案作为真实答案而不是注释发布，因为它确实回答了这个问题：）我通常把简单的答案作为评论发布：）也许我错了，但这个问题并没有让我感觉到发布了答案：）我是一个写网页的新手。在这种情况下，我使用CSS来指定效果，并使用jQuery切换来添加类来触发事件，从而实现了效果。我很惊讶jQuery是多么简单……一点也不可怕。