jquery - 当鼠标悬停在使用 jQuery 的其中一个元素上时，如何为共享同一类的所有元素添加边框？

Question

我有一个生成的 HTML 文件，其中包含大块文本，其中包含生成的类名称和跨度:

This <span class="21232">an example</span> of what <span class="332423">
I'm talking</span> about.  There are span's with <span class="21232"> generated
ID's </span>.

现在，我想做的是，如果我将鼠标悬停在任何跨度上，它们不仅会为该跨度添加边框，还会为共享同一类的所有其他跨度添加边框。

因此，如果我将鼠标悬停在第一个跨度上，它会在“示例”和“生成的 ID”周围加上边框，因为第一个和第三个跨度共享相同的类名。

我很确定我不能用直接的 CSS 来做到这一点。使用 jQuery 可以吗？如果是这样，任何人都可以为我指出正确的方向，以尽可能简单地做到这一点吗？

Answer 1

$('p#experiment > span[class]').hover(function(){
    $('.' + $(this).attr('class')).css('border', '1px solid red')
},
function(){ 
    $('.' + $(this).attr('class')).css('border', 'none') 
})

http://jsfiddle.net/RE3ya/1/