HTML Jquery在鼠标悬停时左右移动图像

我不熟悉HTML和jquery，当鼠标悬停在HTML页面中的图像上时，我尝试将图像左右移动

我认为这可以使用jquery动画功能来完成，但我不能让它工作

有人能告诉我一个简单的HTML代码如何做到这一点吗

---

谢谢，

这是一个例子，有数百种不同的方法

CSS方法：

#css img {
    left: 0px;
    transition: left .5s;
}
#css:hover img {
    left: 50px;
}

JavaScript/jQuery方式：

$('#js').on('mouseenter', function() {
  $(this).find('img').css('left', '50px');
}).on('mouseleave', function() {
  $(this).find('img').css('left', '0px');
});

---

使用动画： JavaScript/jQuery：

$('#js').hover(function () {
    $(this).find('img').animate({
        left: '50px'
    }, 500);
}, function () {
    $(this).find('img').animate({
        left: '0px'
    }, 500);
});

CSS转换：

img {
    position: relative;
    margin:20px;
    left:0px;
    -webkit-transition: left 500ms;
    -moz-transition: left 500ms;
    -ms-transition: left 500ms;
    -o-transition: left 500ms;
    transition: left 500ms;
}
#css:hover img {
    left:50px;
}

---

请向我们展示到目前为止您已经尝试过的img{position:relative；}$（'#box img'）。悬停（函数（）{$（this）。动画（{right:'2px'}）；}，函数（）{$（this）。动画（{left:'2px'}）；}）；您可以编辑答案，将代码插入到问题中，并将其格式化为可读。更好，更容易理解的问题得到更好的答案。这是我写的代码。我想做的是，当鼠标悬停在图像上时，图像向右移动，当鼠标离开图像时，图像返回到相同的位置。但这样做的是，当鼠标悬停在图像左侧时，图像会消失。请告诉我我的错误代码是img{position:relative；}$（'boximg'）。悬停（函数（）{$（this）。动画（{right:'2px'}）；}，函数（）{$（this）。动画（{left:'2px'}）；}）@user2942227，left参数表示到左边的距离，所以只要将该值调大，它就会向右移动。无需使用

右键：“2px”

。你看到我的演示了吗？我认为CSS就是你在这里需要的