Question

I have a generated HTML file which has large blocks of text with span’s sprinkled throughout it with generated class names:

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

Now, what I’m seeking to do, is if I hover over any of my spans, they will add a border to not only that span, but all other spans that share that same class.

So, if I were to hover over the first span, it would wrap a border around “an example” and “generated ID’s” because the first and third span share the same class name.

I was pretty sure I couldn’t do it in straight CSS. Is this possible using jQuery? If so, can anyone point me in the right direction for doing this as simply as possible?

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/