jQuery 类更改在鼠标悬停之前不会更新

Question

我有一个菜单，每个菜单项都是一个在 css 中设置了类的跨度:

.newClass {color: red}

.oldClass {color:black} oldClass:hover {color:blue;}

当您单击菜单项时，类将更改为: $(this).removeClass('oldClass').addClass('newClass');效果很好。

当单击另一个菜单项时，我将类更改回当前菜单项: $(this).removeClass('newClass').addClass('oldClass');

问题是当类改回时，直到我将鼠标悬停在菜单项上时，更改才会反射(reflect)出来。因此，菜单项颜色保持红色，直到我将其鼠标悬停，然后它会变回黑色，并带有蓝色悬停。

请参阅评论中 Gaby 的示例，了解应该发生的情况

这是我的实际代码:

$('.headingRev').removeClass('headingRev').addClass('heading');<br/>
$(this).removeClass('heading').addClass('headingRev');

这是CSS:

.heading {color: #bb1f1a;}<br/>
.heading:hover {color: #e9b49e;text-decoration:none;}<br/>
.headingRev {color: #e9b49e;}

Answer 1

一个可能的问题可能是您从当前菜单项中删除选择的方式。

如果您从点击内部执行此操作，则不应使用 this，因为 this 将指向单击的元素，而不是之前的当前元素。如果如果是这样，那么您应该使用 $('.newClass').removeClass('newClass').addClass('oldClass');

查看一些适用于 http://www.jsfiddle.net/khGRW/ 的代码

更新

我现在明白了..您正在使用Cufon，它将文本替换为图像或 Canvas 元素..

这使得它无法响应正常的 DOM 更改。

将类更改为元素(当前不在 hover 事件下后，您需要调用 Cufon.refresh('#content')/em>) 强制它根据 DOM 的当前状态重新绘制菜单。

hover 效果会自动处理，因为它们支持该选项，但这就​​是 DOM 监控从 Cufon 端结束的地方。