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?

I have a generated HTML file which has large blocks of text with span's sprinkled throughout it with generated class names: This an example o

Solution 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/

Solution 2:

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