jQuery를 사용하여 마우스 위로 마우스를 가져 가면 클래스를 공유하는 모든 요소에 테두리를 추가 할 수 있습니까?

Question

I 범위의 IT 전반에 걸쳐 뿌려 생성 된 클래스 이름과 텍스트의 큰 블록을 가지고 생성 된 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/

Answer 2

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