Jquery 停止“Div”改变“hover”位置

我正在尝试使用HTML、CSS和Jquery构建一个音频播放器。我在使用Jquery的“hover”方法时遇到了问题。当“背景图像”被删除时，它似乎会向下移动div-这是为什么？我知道这与页面的流动有关。我想我应该重新启动音频播放器，因为它有太多的错误。我应该只使用CSS悬停吗

这里是一个链接到现场直播

$'.music box'。悬停功能{ $'.music box'.cssborder，1px纯黑； $'.music box'.cssbackground，无； $'.player'.css'display'、'block'； $'.music details'.css'display'，'block'； $'.buyDiv'.css'display'，'block'； }; $“.music box.”鼠标移动功能{ $'.music box'.cssborder，无； $'.music box'.cssbackground，url'junction.jpg'； $'.music box'.cssbackground大小，包含； $'.music box'.cssbackground重复，不重复； $'.player'.css'display'，'none'； $'.music details'.css'display'，'none'； $'.buyDiv'.css'display'，'none'； }; .路口{ 显示：内联； 填充物：2vw； } .音乐盒{ 背景：urljunction.jpg； 背景尺寸：包含； 背景重复：无重复； 位置：相对位置； 宽度：16vw； 光标：指针； 高度：30vh； 显示：内联块； } .音乐详情{ 显示：无； 位置：相对位置； 顶部：5vh； 文本转换：大写； 字号：1vh； 字体系列：“Nunito Sans”，无衬线； 字母间距：0.5px； 字体大小：正常； } 阿普利克先生{ 高度：3vh； 宽度：自动； } .玩家{ 显示：无； 位置：相对位置； 顶部：7vh； } 布迪夫先生{ 显示：无； 高度：3vh； 顶部：9vh； 宽度：自动； 位置：相对位置； } .购买清单{ 位置：相对位置； 填充：0； 保证金：0； } 李先生{ 显示：内联； 光标：指针； } .buyFnt{ 文本转换：大写； 字号：1vh； 字体系列：“Nunito Sans”，无衬线； 字母间距：0.5px； 字体大小：正常； 显示：内联； 光标：指针； } 连接-EP 在feat Madi巷转弯 我的Nu Leng-2018 购买

---

可能存在来自其他CSS/JS的干扰。我把你的代码复制到这里

HTML

---

为了使它更完美，我们需要做一些小的改变。 将浮点属性和背景位置添加到music box class.music-box css，如下所示：

.music-box{
     float:left;
     background-position: center !important;
}

---

这在您的网站上有效，我在您的网站上进行了测试。

那么，我们需要在该实时网站示例上悬停什么，才能看到您所谈论的效果呢？因为我到处都找不到它。你觉得这和背景图像有什么特别的关系？特别是考虑到你也在操纵其他东西，比如边框——这很可能会影响元素布局/维度。“我应该使用CSS悬停吗？”——如果一开始没有必要在JS中做任何事情——那么是的，这几乎总是最好的选择。对不起，在“发布”部分，当你将鼠标悬停在艺术品上时，“div”会跳跃并剪辑，而不是停留在原位。好的，谢谢。我想这可能是由于图像大小或某些定位错误，我就是想不出来。我可以建议逐个剥离元素/js/css，看看是否可以修复它。您也可以尝试更换容器：祝您好运！是的，这很好，但是改变了布局。给了我一些要处理的东西，谢谢。@designtocode它可以根据需要用几行css来修复。如果需要我可以帮你是的，请。我想我已经解决了这个问题，在列表项中添加了float left，并在容器中添加了padding以使列表居中，你能绿色检查这个答案吗，本杰明？

$('.music-box').hover(function() {
    $('.music-box').css("border", "1px solid black");
    $('.music-box').css("background", "none");
    $('.player').css('display', 'block');
    $('.music-details').css('display', 'block');
    $('.buyDiv').css('display', 'block');
});
$('.music-box').mouseleave(function() {
    $('.music-box').css("border", "none");
    $('.music-box').css("background", "url('https://benjamingibbsportfolio.000webhostapp.com/junction.jpg')");
    $('.music-box').css("background-size", "contain");
    $('.music-box').css("background-repeat", "no-repeat");
    $('.player').css('display', 'none');
    $('.music-details').css('display', 'none');
    $('.buyDiv').css('display', 'none');
});    

.music-box{
     float:left;
     background-position: center !important;
}