当鼠标悬停在其中一个使用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?当鼠标悬停在其中一个使用jQuery的元素上时，如何为共享一个类的所有元素添加边框？
【发布时间】：2023-04-08 17:03:01
【问题描述】：

我有一个生成的 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>.

现在，我想做的是，如果我将鼠标悬停在我的任何跨度上，它们不仅会为该跨度添加边框，还会为共享同一类的所有其他跨度添加边框。

因此，如果我将鼠标悬停在第一个 span 上，它会在“示例”和“生成的 ID”周围加上边框，因为第一个和第三个 span 共享相同的类名。

我很确定我不能在直接的 CSS 中做到这一点。这可能使用jQuery吗？如果是这样，任何人都可以为我指出正确的方向以尽可能简单地执行此操作吗？

【问题讨论】：

标签： jquery html css

【解决方案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/

【讨论】：

@meo：我认为数字是有效的类名。据我所知，这只是类的“任何事情”（主要例外是空格，因为它们是分隔符）。
在使用 jquery 选择类时，最好使用 . 表示法，而不是 class=..，因为即使为该元素定义了多个类，它也会起作用。 .
你说得对，这只是我已经更正了我的 awnser 的 ID
@gaby 感谢这个！ +1 我已经修改了我的示例和 jsfiddle 链接

【解决方案2】：

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

【讨论】：

我认为添加/删除具有边框规则集的类会更好..以便在悬停后边框返回其原始值..
@Gaby：我同意添加/删除类比在 js 中分散样式更好，但这确实清除了设置值。还是我错过了你的意思？
我的意思是，如果现有规则（悬停之前）设置了不同的边框，当您手动将其设置为空值（悬停后）时，它将丢失..
@Gaby：好的，我明白你的意思。我认为这不是问题，因为跨度的存在似乎只是为了在悬停时突出显示，但总的来说，我同意如果有任何不确定性，类会更安全。
是的，你是对的......我的评论更多的是作为一般规则..这里的具体用途如你所描述。