0

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

4

1 回答 1

0

这可以通过 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>
于 2012-11-19T15:45:14.637 回答