Как я могу добавить границу для всех элементов, которые разделяют класс, когда мышь наведена на один из них с помощью jQuery?

Question

У меня есть сгенерированный HTML-файл, в котором есть большие блоки текста с разбросанным по нему span с именами сгенерированных классов:

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>.

Теперь, что я пытаюсь сделать, так это то, что если я наведу курсор мыши на какой-либо из моих промежутков, они добавят границу не только к этому промежутку, но и ко всем остальным промежуткам, принадлежащим к тому же классу.

Таким образом, если бы я наводил курсор на первый диапазон, он обернул бы границу вокруг «примера» и «сгенерированных идентификаторов», потому что первый и третий диапазоны имеют одно и то же имя класса.

Я был почти уверен, что не смогу сделать это простым 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/

Answer 2

$('span[class]').hover(
function() {
    $('.' + $(this).attr('class')).css('border','1px solid purple');
},
function() {
    $('.' + $(this).attr('class')).css('border','');
}
)