jQuery .hover无法正常工作

Question

这可能是一个非常愚蠢的事情,但我一次又一次地看过这个代码,似乎无法理解为什么它不起作用.

这是我的JS:

$(document).ready( function() {
    $("#flame").hover( function() 
    { $(this).removeClass("normal").addClass("hover"); }
    );
});

我的HTML:

<a href="javascript:void()">
<div id="flame" class="normal"></div>
</a>

任何我的CSS,好的措施:

#flame {
    margin:auto;
    width: 180px;
    height: 218px;
}

.normal {
    background: url(../images/flame_normal.png);
}

.hover {
    background: url(../images/flame_hover.png);
}

我有足够的时间使用相同的jQuery效果,我甚至得到了另一个用类似的源代码创建的js文件,但我无法理解为什么它不起作用.

Answer 1

在jQuery 1.4之前,.hover()需要2个函数.添加第二个,你应该没事.

$(document).ready( function() {
    $("#flame").hover(function() { 
               $(this).removeClass("normal").addClass("hover"); 
           }, function() {
               $(this).removeClass("hover").addClass("normal"); 

      });
});

此外,您可以单独使用css处理此问题(但浏览器支持有限):

#flame {
   ...
   background: url(../images/flame_normal.png);
}

#flame:hover {
   background: url(../images/flame_hover.png);
}