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在我看来不适合这种东西的工具（至少在目前），你可能最终会使用很多实现这一目标并使其与所有浏览器兼容的黑客攻击。

悬停在另一个元素上时动画一个元素

1 个答案: