将鼠标悬停在另一个div上时，将图像旋转并向右移动图像

Question

我想将鼠标悬停在图像（音乐专辑）上，然后推出记录，因此我希望它向右移动并旋转一点。 它已经可以向右移动，但我无法使其随其旋转。

＃cover1是专辑，而＃coverrecord1是需要推出的记录，我喜欢尽可能简化，因为我不是编码专家。

非常感谢。

 $(document).ready(function (){
     $("#cover1").hover(
         function() {
             $("#coverrecord1").stop().animate({ left: '5%' });
         },
         function() {
             $("#coverrecord1").stop().animate({ left: '0' });
         }
     );
});

Answer 1

如果您愿意，也可以跳过js :)

 .album { background-color: orange; height: 10em; margin: 3em auto; position: relative; width: 10em; } .album:after, .album:before { content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .album:after { background-color: orange; z-index: 1; } .album:before { background-image: linear-gradient(to left, gray, black); border-radius: 50%; transition: transform 500ms; } .album:hover:before { transform: translate3d(40%, 0%, 0) rotate(30deg); } 

 <div class="album"></div>