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>

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

1 个答案: