Have Geek Brain

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

I have a generated HTML file with large blocks of text spanning the span across the entire layer with the generated class names:

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

Now what I am trying to do is if I hover over any of my gaps, they will add a border not only to that range, but all other areas that share the same class.

So, if I hovered over the first range, it would wrap a border around the "example" and the "generated ids", because the first and third ranges have the same class name.

I was pretty sure I couldn't do it in straight CSS. Is this possible with jQuery? If so, can anyone point me in the right direction to make this as easy as possible?

+1


a source to share


2 answers 


$('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/

+3


a source 


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


+2


a source






More articles:


All Articles