jquery - 如何让动画跟随光标

Question

因此，目前，如果您将鼠标悬停在指南针上，指针会旋转，但是，当您将鼠标移开时，它只会重置。

有没有办法我可以：

• 当鼠标悬停在任何地方时，让针跟随在任何地方

或者

• 像现在一样在悬停时旋转，但是当我将鼠标移开时会暂停并在我重新悬停时恢复

该网站可以在

newsunken.tumblr.com

我目前的代码是......

.arrow {
    background-image: url(compass.png);
}

.arrowhover {
    position: absolute;
    margin-top: -72px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transition: all 0s ease-in-out;
    -moz-transition: all 0s ease-in-out;
    -ms-transition: all 0s ease-in-out;
    -o-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out;
}

（即当我取下鼠标时阻止箭头旋转）

自旋码是

.arrowhover:hover {
    -webkit-transform: rotate(1440deg);
    -moz-transform: rotate(1440deg);
    -webkit-transition: all 1.7s ease-out;
    -moz-transition: all 1.7s ease-in-out;
    -ms-transition: all 1.7s ease-in-out;
    -o-transition: all 1.7s ease-in-out;
    transition: all 1.7s ease-in-out;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Answer 1

我不认为你可以纯粹用 CSS 来做到这一点。您将不得不使用 javascript 来获取鼠标 x 和 y 位置，当它在指南针区域内时，根据鼠标位置旋转它。

也许这对您有用： 如何相对于鼠标位置旋转图像？