如何让这个div有悬停效果？

Question

我想在我的页面上获得div来产生悬停效果。我相信我已经正确编码它，它只是不工作。这是我的代码。

感谢您提前提供所有帮助！

Click here for a JSfiddle of my problem.

使用Javascript -

$(document).ready(function(){ 

$(function() { 
    function creeperFloat() { 
     $('.creeper').animate({ 
      left: '+=35', 
      top: '+=25' 
     }, 4500).animate({ 
      left: '-=35', 
      top: '-=25' 
     }, 4500, creeperFloat); 
    } 

    creeperFloat(); 
}); 
creeperFloat(); 
}); 

HTML -

<div class="creeper"> 
    </div> 

CSS -

.creeper { 
    background: transparent url(http://s14.postimg.org/bsrst8btt/spacecreep.png) 50% 0 no-repeat; 
    position: absolute; 
    width: 300px; 
    height: 200px; 
    top: 175px; 
    left: 58%; 
    z-index:5; 
    display:block; 
} 

Answer 1

在你的小提琴，你还没有加载jQuery框架您功能无法访问。 Here's a fixed Fiddle和功能本身：

$(function(){ 
function creeperFloat() { 
     $('.creeper').animate({ 
      'left': '+=35', 
      'top': '+=25' 
     }, 4500).animate({ 
      'left': '-=35', 
      'top': '-=25' 
     }, 4500, creeperFloat); 
    } 
creeperFloat(); 
});