0

我将如何定位最左边的 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>

使用此代码：

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

那么，如果我将鼠标悬停在第三个列表的 nth-child(2) 上，如何更改第一个列表上的 nth-child(2) 的背景？（有一类“类别”）

任何帮助表示赞赏！

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

http://www.sinsysonline.com/repair/price.html

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

4

1 回答 1

1

您只需要指定类 ( li.category:nth-child...)：

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

我在这里工作：http: //jsbin.com/ecunih/1/

于 2013-05-27T18:02:48.007 回答