鼠標懸停和Mouseleave Jquery圖像交換。在本地工作 - 不在服務器上？

Question

我試圖做一個mouseover/mouseleave圖像交換看到下面。它在我的本地工作很好，但是一旦在我的服務器上，mouseleave會給我一個圖像應該存在的斷開鏈接圖標。用開發人員工具查看它的代碼工作得很好，除了斷開的鏈接。我知道圖像路徑正在工作，因爲圖像在加載和懸停前存在。

我很難過，任何意見將不勝感激！

<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"}); 
}); 

}); 

Answer 1

在一些其他來源網上找這個鏈接（Jquery Mouseenter/Mouse Leave image swap）之後，我發現我需要調用.hover功能而不是單獨調用鼠標懸停和鼠標離開。這是一個適用於我的解決方案：

<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>