为什么这个jQuery片段在IE8中不能像在火狐或Chrome中那样工作(包括Live Demo )？

Question

我早些时候在Stackoverflow上请求帮助，当鼠标悬停在具有相同类的任何跨度上时，高亮显示具有相同类的跨度。

它工作得很好：

How can I add a border to all the elements that share a class when the mouse has hovered over one of them using jQuery?

   $('span[class]').hover(
function() {
    $('.' + $(this).attr('class')).css('background-color','green');
},
function() {
    $('.' + $(this).attr('class')).css('background-color','yellow');
}
)

下面是它的用法示例：

http://dl.dropbox.com/u/638285/0utput.html

然而，它在IE8中似乎不能正常工作，而在Chrome/Firefox中却可以正常工作。

这是它在IE8中的屏幕截图，我的鼠标悬停在中间的"> min) { min"部分。

​

​

如您所见，它突出显示了鼠标悬停在其上的跨度非常好。然而，它也高亮显示了一些不具有相同类的上下随机跨度！只有与鼠标所在的跨度具有相同类的跨度才会以绿色突出显示。在此屏幕截图中，只有中间绿色部分应该是绿色的。

这是它在Firefox/Chrome中正常工作的屏幕截图，我的鼠标在完全相同的位置：

​

​

此屏幕截图是正确的，因为鼠标所在的跨度(绿色部分)是此部分中唯一共享该类的跨度。

为什么在使用我的小jQuery片段时，IE8会随机地以绿色突出显示跨度(它们不应该共享同一个类)？

同样，如果你想看现场直播，我在这里提供：http://dl.dropbox.com/u/638285/0utput.html

Answer 1

当我在IE8中运行脚本调试器时，您的悬停函数被多次调用，因为事件在嵌套跨度树中向上传播。你试过event.stopPropagation()吗？

编辑：实际上，我认为问题在于您需要将<>编码为>和<

例如，这段代码片段public List<FingerPrints> fingerPrints(List<Kgram在这个public List fingerPrints(List中受到了彻底的抨击，IE (以及FireFox )将<FingerPrints>解释为一个标记，而IE试图关闭该标记，这会导致跨度变得一团糟。