<li> 按 id 将项目绑定到停靠元素

Question

我有一个<ul>，A和B作为其<li>，具有悬停时的高亮效果。我还能够创建一个类似Mac OS X的dock(灵感来自Henrique Erzinger的CodePen(，其中包含A1、A2、A3、B1和B2。

有没有一种方法可以将列表中的项目与dock中的项目联系起来，这样将鼠标悬停在列表项目上可以使链接的dock元素成为焦点？

例如：

Hover A -> Focus/Enlarged A1, A2, A3
Hover B -> Focus/Enlarged B1, B2

这是我的JSFiddle，包括列表和码头。

提前谢谢。

Answer 1

是的，使用JavaScript是可能的。例如，您必须将停靠项目与类进行分组。groupA和.groupB，并给它们一个子类.focused(所以.groupA.focused(，该子类的样式应该与dock元素的:hover样式相同。

然后，当您将鼠标悬停在A或B上并分别在dock元素上切换.focused类时，您的脚本应该会触发。

至少这是理论。编码你将不得不自己做。