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

【问题标题】：rotate and move image to the right when hovering over another div将鼠标悬停在另一个 div 上时旋转并向右移动图像
【发布时间】：2016-12-07 14:51:09
【问题描述】：

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

#cover1 是专辑，#coverrecord1 是需要推出的唱片，我喜欢让它尽可能简单，因为我不是编码专家。

非常感谢。

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

【问题讨论】：

请张贴小提琴或完整的sn-p。
你能把这段代码的html和css也加进去，这样我就可以在jsfiddle里玩了
jsfiddle.net/y0qpwrq8 我从来没有用过小提琴，我希望我做得对，只有你需要改变的图像。希望这行得通。

标签： php jquery css wordpress nav

【解决方案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);
}

&lt;div class="album"&gt;&lt;/div&gt;

【讨论】：

感谢您的回答，但我已经有图片可以使用，唯一剩下的就是让它旋转。