通过jQuery实现单个li项特定背景

我如何定位最左侧的li项目并将其涂成不同的颜色

当任何项目悬停在以下位置时，我当前正在选择此假装设置中的所有水平项目：

<ul class="features">
<li class="category"><a href="services_hwrep.html">Hardware Repair</a></li>
<li class="category"><a href="services_netts.html">Network Troubleshooting</a></li>
<li class="category"><a href="services_printsetup.html">Printer Setup</a></li>
</ul>

<ul class="features">
<li><a href="services_hwrep.html">Hardware Repair</a></li>
<li><a href="services_netts.html">Network Troubleshooting</a></li>
<li><a href="services_printsetup.html">Printer Setup</a></li>
</ul>


<ul class="features">
<li><a href="services_hwrep.html">Hardware Repair</a></li>
<li><a href="services_netts.html">Network Troubleshooting</a></li>
<li><a href="services_printsetup.html">Printer Setup</a></li>
</ul>

因此，如果我将鼠标悬停在第三个列表的第n个孩子（2）上，我如何更改第一个列表中第n个孩子（2）的背景？（具有“类别”类别）

感谢您的帮助

可以在这里找到我正在尝试做的事情的实时视觉表现：

---

我希望突出显示的左侧类别li为蓝色，就像悬停时的价格li一样。

您只需指定类别（

li.category:nth child…

）：

---

我在这里工作：

因此，理论上它工作得很好：-p我有一些内部样式正在破坏它，但我会在完成后上传它。我想这会非常简单。。。我只是不断尝试从（这个）树回来，而不是仅仅定义它在第一位：-P谢谢！工作：谢谢！You da man:-P做了一些奇怪的复杂造型，但现在看起来很干净（除了小虫子）

$('ul.features li').on('mouseenter mouseleave', function () {
    $('ul.features > li:nth-child(' + ($(this).index() + 1) + ' )').toggleClass('pri_active');
});

$('ul.features li').on('mouseenter mouseleave', function () {
    $('ul.features > li.category:nth-child(' + ($(this).index() + 1) + ' )').toggleClass('pri_active');
});