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