Javascript 无序列表中对应产品的悬停状态

我在一个无序的列表和单独的列表项中工作。菜单由顶部列表项中的产品图像和下面列表项中的相应产品名称组成。我在底部列表项（产品名称）上有一个悬停状态。我希望在将鼠标悬停在最上面的列表项（产品图像）上时也能激活相同的悬停状态。因此，当我将鼠标悬停在/images/foo.png上时，单独列表项中下面的链接将变成#ffffff。下面是我正在使用的代码。这是一个非常大的菜单的小样本

<ul>
<li><a href="/products/">SPOUTS</a>
    <ul>
        <li class="menuheader"><a href="/products/spouts/index/">SPOUTS</a></li>
            <li>
                <a href="/products/spouts/foo/"><img src="/images/foo.png" style="margin:20px 0px 0px 20px;float:left;" /></a>
                <a href="/products/spouts/bar/"><img src="/images/bar.png" style="margin:20px 20px 0px 5px;float:left;" /></a>
                </li>
            <li style="margin-top:10px;">
                <a href="/products/spouts/foo/" style="float:left;margin-left:50px;">FOO</a> 
                <a href="/products/spouts/bar/" style="float:left;margin-left:60px;">BAR</a>
                </li>
    </ul>
</li>

---

这可以通过jQuery实现。大概是这样的：

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
     $(".YOUR_IMAGE").mouseenter(function (event) {
          $(".YOUR_LINK").addClass('hoverState');
     });

     $(".YOUR_IMAGE").mouseleave(function (event) {
          $(".YOUR_LINK").removeClass('hoverState');
     });
});
</script>

$（文档）.ready（函数（）{
$（“.YOUR_IMAGE”）.mouseenter（函数（事件）{
$（“.YOUR_LINK”）.addClass（'hoverState'）；
});
$（“.YOUR_IMAGE”）.mouseleave（函数（事件）{
$（“.YOUR_LINK”）.removeClass（'hoverState'）；
});
});

问题是，当我将鼠标悬停在图像上时，如何获得相应的产品名称，使其处于悬停状态。我会在每个图像上放置一个类吗？很抱歉，你能相应地调整一下价格吗。我有点迷路了。提前谢谢。是的，您会为每个图像/链接组合复制上面的代码。您可能希望在每封电子邮件和链接上放置一个唯一的类。