Jquery，用户交互：悬停链接以突出显示项目组合

Question

JS Fiddle（代码）

这更多是我为自己设定的学习数组的任务，但现在我想知道是否你们中的任何人都可以想出一种更好、更清洁的方法来完成这项任务。我只是想要一个项目列表，当用户将鼠标悬停在某些链接上时突出显示。

我想要做什么

我有一个项目列表，在每个项目中我可以从事 SEO、开发或设计。页面上还有一个链接列表：设计、开发和 SEO。当将鼠标悬停在链接上时，我希望突出显示一些项目..（组合）。因此，我可能会完成多个任务的某些项目将突出显示多个链接......

我目前如何尝试执行此操作

我认为我可以使用列表创建一个二维数组项目的断断续续。根据您将鼠标悬停在哪个链接上，会拉出正确的数组，如果您看到 JSfiddle 链接，那就是我能做的。

非常相似的示例

ID 设计

感谢您提供任何帮助或建议

我希望我能清楚地解释这一点，我知道我可以撕掉示例链接的代码，但我宁愿从中学习剪切和粘贴.. - 看看别人的想法和使用jquery。

Answer 1

您可以为每个项目使用 3 种不同的样式，例如：“.design”、“.seo”、“.development”

$("#link1").hover(
  function ()
  {
    $(".design").each(function()
    {
        $(this).toggleClass("highlight");
    });
  },
  function ()
  {
    $(".design").each(function()
    {
        $(this).toggleClass("highlight");
    });
  }
);

说明：
当鼠标悬停在 link1 上时，使用 .design 类的元素上的 .highlight 类会切换（鼠标悬停时添加，鼠标移出时删除）。您可以对其他 2 门课程进行类似的操作。