悬停图像 1 时移动图像 2

Question

我想做什么：

悬停图像 1 时将图像 2 向下移动 5px：

我不懂代码（一点点 CSS），但我认为这个可以帮助我做我想做的事，当然它不起作用，你能告诉我为什么吗？

jQuery(document).ready(function($){

$('.image1').on('mouseenter', function() {
$(".image2").addClass("move5px");
});
});

$('.image1').on('mouseleave', function() {
$(".image2").removeClass("move5px");
});

我使用的类：

.move5px{
   top:-5px
}

Answer 1

好的，这是工作代码（添加了#id名称）：

jQuery(document).ready(function($) {
  $('#image1').on('mouseenter', function() {
    $("#image2").addClass("move5px");
  });
  $('#image1').on('mouseleave', function() {
    $("#image2").removeClass("move5px");
  });
});

以及为动画添加过渡的 css :

#image2 { transition: 150ms; }
.move5px{
   padding-top:5px; 
}