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 に答える