Question

我有一个生成的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','');
}
)

当鼠标使用jQuery悬停在其中一个上时，如何为共享类的所有元素添加边框？

2 个答案: