悬停时突出显示多个元素答案

【问题标题】：Highlighting multiple elements on hover悬停时突出显示多个元素
【发布时间】：2012-08-15 09:06:12
【问题描述】：

在一个元素悬停时突出显示多个元素是一个常见问题。 Stack about this issue 上有一些类似的问题，但它通常只处理一层信息。

例如：当我点击这个框时，我想突出显示另一个框。

我想将此功能添加到三层信息中，并使其可互换工作。

您可以看到它正在工作，但我想知道是否有更好的方法。例如，当我每层有大约 12 个选项时是可以的，但如果是 50 或 100 怎么办？有没有办法简化它，这样在每个层中添加多个项目会更容易，而无需手动添加相对于 id 的每个类名？

似乎我可以通过将变量传递给函数来稍微打开显式类名，但我不知道如何获取悬停对象的所有类名，并根据类名检查它们在其他层。

或者，如果你知道有一个插件可以神奇地做到这一点？

【问题讨论】：

【解决方案1】：

这是使用 jQuery 的最佳方式。您也可以使用应用于父元素的 CSS 和类来实现类似的效果。

例如：

<div>
    <div class="bob">This is Bob.</div>
</div>

然后给父元素添加一个类：

<div class="show-bob">
    <div class="bob">This is Bob.</div>
</div>

当然，这里的 CSS 是关键：

.bob { opacity: 0.75 }
.show-bob .bob { opacity: 1 }

当然，您需要在此处添加一些 CSS 动画属性以实现真正的功能对等，但您明白了要点。

【讨论】：