在悬停时突出显示多个元素

Question

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

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

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

See the fiddle here.

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

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

或者，如果你知道那个神奇的插件吗？

Answer 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动画属性来实现真正的功能奇偶校验，但是你得到了要点。