这可能是非常愚蠢的事情,但我一遍又一遍地检查这段代码,似乎无法弄清楚为什么它不起作用。
这是我的 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 文件,但我不明白为什么它不起作用。
最佳答案
在 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);
}
关于javascript - jQuery .hover 无法工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6885830/