Mouseover和Mouseleave Jquery图像交换。在本地端工作-不在服务器上？

我正在尝试进行鼠标覆盖/鼠标删除图像交换，如下图所示。它在我的本地端工作得很好，但一旦在我的服务器上，鼠标移动会给我一个断开的链接图标，图像应该在哪里。用开发人员的工具来看，除了断开的链接外，代码运行得很好。我知道图像路径正在工作，因为图像在加载和悬停之前就在那里

我很困惑，任何建议都将不胜感激

<div class="testing123"><img src="images/BotGrid/images/blackFull_05_03.png"  /></div>





$(document).ready(function(){

$('.testing123').on('mouseover', function(){
    $(this).find('img').attr('src','images/BotGrid/images/yellowfull_05_03.png');
    $(this).css({"backgroundColor": "black"});
});

$('.testing123').on('mouseleave', function(){
    $(this).find('img').attr('src','images/BotGrid/images/blackfull_05_03.png');
    $(this).css({"backgroundColor": "yellow"});
});

});

---

在查看了一些其他在线资源和此链接后，我发现我需要调用.hover函数，而不是单独调用mouseover和mouseleave。以下是一个对我有效的解决方案：

<div class="bottomsquares">
<img src="images/BotGrid/images/blackFull_05_03.png"  class="static" name="aeffect" alt="" />        
<img src="images/BotGrid/images/yellowfull_05_03.png"  class="rollover" name="aeffect" alt="" />

 </div>


<script>
$(document).ready(function(){
$(".rollover").hide();
$(".bottomsquares").hover(
function(){
    $(this).find(".static,.rollover").toggle();
}, 
function(){
    $(this).find(".static,.rollover").toggle();
});
});
</script>

<script>
$(".bottomsquares").hover(function() {

$(this).css('background-color', '#000000');
}, function() {
$(this).css('background-color', '#f9e42b');
});
</script>

---

那么黄色完整图像是否正确显示？鼠标悬停前会显示黑色的完整图像吗？