Javascript 使图像在悬停时向下移动

当前，当我将鼠标悬停在图像上时，它会向上移动，而我希望它在悬停时向下移动，这样图像的顶部会与所有其他图像对齐

代码：

$（“ul.games li”）。悬停(
函数（）{
$（this.addClass（'active'）；
},
函数（）{
$（this.removeClass（'active'）；
}
);
正文{
背景色：#717e99；
}
部分#横幅。游戏选择器{
位置：绝对位置；
顶部：100px；
}
部分#横幅。游戏选择器ul li{
显示：内联块；
右边距：-10px；
填充：0px；
位置：相对位置；
宽度：300px；
高度：160px；
溢出：隐藏；
光标：指针；
-webkit过渡：背景位置；
}
部分#横幅。游戏选择器ul li.active{
位置：相对位置；
z指数：100；
宽度：300px；
高度：175px；
背景位置：中底；
}
部分#横幅。游戏选择器ul li.minecraft{
背景图像：url（'http://i.imgur.com/UK5lBRh.png');
背景位置：中上；
}
部分#横幅。游戏选择器ul li.csgo{
背景图像：url（'http://i.imgur.com/UK5lBRh.png');
背景位置：中上；
}
部分#横幅。游戏选择器ul li.gmod{
背景图像：url（'http://i.imgur.com/UK5lBRh.png');
背景位置：中上；
}
第#节横幅。游戏选择器ul li.tf2{
背景图像：url（'http://i.imgur.com/UK5lBRh.png');
背景位置：中上；
}






将
top:5px
添加到
.active
中，将
中的
高度：175px
更改为
160px
，这是默认值

我还改进了jQuery代码


$（“ul.games li”）.悬停（函数（）{
$（'ul.games li'）。removeClass（“活动”）；
$（此）.addClass（“活动”）；
});
正文{
背景色：#717e99；
}
部分#横幅。游戏选择器{
位置：绝对位置；
顶部：100px；
}
部分#横幅。游戏选择器ul li{
显示：内联块；
右边距：-10px；
填充：0px；
位置：相对位置；
宽度：300px；
高度：160px；
溢出：隐藏；
光标：指针；
-webkit过渡：背景位置；
}
部分#横幅。游戏选择器ul li.active{
位置：相对位置；
z指数：100；
宽度：300px；
高度：160px；
背景位置：中底；
顶部：5px
}
部分#横幅。游戏选择器ul li.minecraft{
背景图像：url（'http://i.imgur.com/UK5lBRh.png');
背景位置：中上；
}
部分#横幅。游戏选择器ul li.csgo{
背景图像：url（'http://i.imgur.com/UK5lBRh.png');
背景位置：中上；
}
部分#横幅。游戏选择器ul li.gmod{
背景图像：url（'http://i.imgur.com/UK5lBRh.png');
背景位置：中上；
}
第#节横幅。游戏选择器ul li.tf2{
背景图像：url（'http://i.imgur.com/UK5lBRh.png');
背景位置：中上；
}






将
top:5px
添加到
.active
中，将
中的
高度：175px
更改为
160px
，这是默认值

我还改进了jQuery代码


$（“ul.games li”）.悬停（函数（）{
$（'ul.games li'）。removeClass（“活动”）；
$（此）.addClass（“活动”）；
});
正文{
背景色：#717e99；
}
部分#横幅。游戏选择器{
位置：绝对位置；
顶部：100px；
}
部分#横幅。游戏选择器ul li{
显示：内联块；
右边距：-10px；
填充：0px；
位置：相对位置；
宽度：300px；
高度：160px；
溢出：隐藏；
光标：指针；
-webkit过渡：背景位置；
}
部分#横幅。游戏选择器ul li.active{
位置：相对位置；
z指数：100；
宽度：300px；
高度：160px；
背景位置：中底；
顶部：5px
}
部分#横幅。游戏选择器ul li.minecraft{
背景图像：url（'http://i.imgur.com/UK5lBRh.png');
背景位置：中上；
}
部分#横幅。游戏选择器ul li.csgo{
背景图像：url（'http://i.imgur.com/UK5lBRh.png');
背景位置：中上；
}
部分#横幅。游戏选择器ul li.gmod{
背景图像：url（'http://i.imgur.com/UK5lBRh.png');
背景位置：中上；
}
第#节横幅。游戏选择器ul li.tf2{
背景图像：url（'http://i.imgur.com/UK5lBRh.png');
背景位置：中上；
}






您可以简单地使用CSS悬停，而不是jQuery悬停。使用
transform:translateY（）
可以轻松移动div，而不会中断其周围的其他内容

section#banner .game-selector ul li:hover {
  transform: translateY(5px);
}

这里是一个更新的小提琴：
您可以简单地使用CSS悬停，而不是jQuery悬停。使用
transform:translateY（）
可以轻松移动div，而不会中断其周围的其他内容

section#banner .game-selector ul li:hover {
  transform: translateY(5px);
}

这里是一个更新的小提琴：
jQuery用于附加一个类，然后更改图像，请注意更改背景位置的活动类。如果转到图像，您将看到它是一张精灵图纸jQuery用于附加一个类，然后更改图像，请注意，如果你转到你将看到的图像，则会更改背景位置的活动类。在本例中，物理图像框仍然向上移动（当我全屏运行你的代码片段时）@user1910046查看更新的答案，我在.active中更改了你的高度在本例中，物理图像框仍然向上移动（当我全屏运行你的代码片段时）@user1910046请参见