javascript - 无序列表中相应产品的悬停状态

Question

我在一个无序列表和单独的列表项中工作。菜单由顶部列表项中的产品图片和下方列表项中的相应产品名称组成。我在底部列表项(产品名称)上有一个悬停状态。当悬停在顶部列表项(产品图像)上时，我也希望使相同的悬停状态处于事件状态。因此，当我将鼠标悬停在/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>

Answer 1

这可以通过 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>