jquery - 悬停时突出显示多个元素

Question

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

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

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

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

似乎我可以通过将变量传递给函数来稍微打开显式类名，但我不知道如何获取悬停对象的所有类名，并将它们与另一个类中的类名进行检查层。

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

score 1 · Accepted Answer

这是使用 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 动画属性以实现真正的功能对等，但您明白了要点。

1 回答 1