jQuery禁用css:hover类

这个问题有点重复，但我已经通读了所有其他答案，但没有一个有用。我有一个图像，我想放大，并能够移动鼠标。喜欢这个网站上的横幅图片

这是我的图像的代码

<img src="https://via.placeholder.com/500" class="flickity-viewport">

我试过了！这很重要，我在这里找到了所有答案，但都不管用。希望有人能帮我：）

这就是解释我所说的代码笔。我想将图像缩放一个数字，并能够像那样移动它。

---

一旦javascript在元素上设置了

transform

，css就会被覆盖。参考站点使用

transform:scale

设置悬停时的缩放，并根据鼠标移动调整

transform origin

属性

下面是一个使用比您的示例少得多的js的示例。当通过

变换：缩放应用“缩放”功能时，它将在
变换原点处放大。在本例中，我从传递到事件处理程序的事件中获取当前鼠标位置，并将
变换原点设置为这些坐标。“摩擦力”是使用css转换计时创建的。缩放仍为.2s，但移动设置为1s，因此图像快速缩放，但重新定位缓慢


jQuery（文档）.ready（函数（$）{
$（'.flickity viewport'）。打开（'mousemove'，函数（e）{
$（this.css（'transform-origin'，e.clientX+'px'+e.clientY+'px'）；
});
});
.flickity视口{
转换：转换。2缓进缓出，
变换原点1s放松；
}
.flickity视口：悬停{
转换：比例（1.2）；
}

非常感谢您！它现在可以工作了：）但是，你能告诉我它在做什么，以及你是如何减少我的代码的吗？当然，我在这里添加了更多的解释。
<script>
jQuery(document).ready(function($){

var lFollowX = 0,
lFollowY = 0,
x = 0,
y = 0,
friction = 1 / 10;

function moveBackground() {
x += (lFollowX - x) * friction;
y += (lFollowY - y) * friction;

translate = 'translate(' + x + 'px, ' + y + 'px) scale(1)';


$('.flickity-viewport').css({
'-webit-transform': translate,
'-moz-transform': translate,
'transform': translate
});

window.requestAnimationFrame(moveBackground);
}

$(window).on('mousemove click', function(e) {

var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - 
e.clientX));
var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - 
e.clientY));
lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
lFollowY = (10 * lMouseY) / 100;


});

moveBackground();

});
</script>

.flickity-viewport{
transition: transform .2s ease-in-out;
}

.flickity-viewport:hover{
transform: scale(1.2);
}