如何在使用jQuery将鼠标悬停在其中一个上时将边框添加到共享类的所有元素？ [英] 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?

问题描述

我有一个生成的HTML文件，其中包含大量文本块，其中包含跨生成的类名称：

  < span class =21232>范例< / span>什么< span class =332423> 
我正在说< / span>关于。 span有&span> span class =21232>生成的
 ID的< / span> ;. 
  

现在，我正在寻找的是如果我将鼠标悬停在我的任何跨度上，他们将不仅添加一个边界，而且还添加一个共享同一类的其他跨度的边框。

因此，如果我将鼠标悬停在第一个跨度上，它将包裹一个围绕示例和生成的ID的边界，因为第一个和第三个跨度共享相同的类名。

我很确定我无法做到这一点直接的CSS。这可能使用jQuery？如果是这样，任何人都可以指出我在正确的方向做到这一点尽可能简单吗？

 }，
 function（）{
 $ '，'none'）
}）
  

http://jsfiddle.net/RE3ya/1/

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?

解决方案

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

这篇关于如何在使用jQuery将鼠标悬停在其中一个上时将边框添加到共享类的所有元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！