0

私はこの問題に悩まされており、これ以外の方法は考えられません。画像を見てください

http://i.stack.imgur.com/7xxjS.png

問題の参考画像

ここでの問題は、div が li の一部ではなく、li を離れる (および div に入ると) li が元に戻ることです。これは処理する必要があり、これを行う方法に行き詰まっています。

以下はJavaScriptコードです

    a.cache.brand_nav.find("li a").hover(function (c) {
        if (a.isTablet && c.currentTarget.href !== f) d.location = c.currentTarget.href;
        else {
            a.cache.brand_nav.find("li a").css('top', '0px'); //Collapsing all li's before expanding one
            c = b(this);
            c.stop(true, true).animate({ top: '-' + c.find("img").height() + 'px' }, 250, 'easeInCirc');
            $('#bgIdeas').stop(true, true).animate({ bottom: '+' + parseInt(parseInt(c.find("img").height())).toString() + 'px' }, 500, 'easeInCirc', false);
            $('.outerBGs').hide();
            $('#backgrounds').hide();
            if (this.className == 'ideas') {
                $('#ideasBG').stop(true, true).show(5000, 'easeOutExpo');
                $('#bgIdeas').empty();
                $('#bgIdeas').append('<p style=" position:absolute; left:22%; margin-top:10px;"><img src="images/ideas/ideas_worldofideas_thumb.jpg"><br>World of Ideas</p>         <p style=" position:absolute; left:32%; margin-top:10px;"><img src="images/ideas/ideas_history_thumb.jpg"><br>History</p>           <p style=" position:absolute; left:42%; margin-top:10px;"><img src="images/ideas/ideas_gulahmed_thumb.jpg"><br>About Gul Ahmed</p>          <p style=" position:absolute; left:52%; margin-top:10px;"><img src="images/ideas/ideas_partner_thumb.jpg"><br>Be an Ideas Partner</p>');
            }
            else
                if (this.className == 'women') {
                    $('#womenBG').stop(true, true).show(5000, 'easeOutExpo');
                    $('#bgIdeas').empty();
                    $('#bgIdeas').append('<p style=" position:absolute; left:42%; margin-top:10px;"><img src="images/women/women_fabrics_thumb.jpg"><br>Fabric</p>          <p style=" position:absolute; left:52%; margin-top:10px;"><img src="images/women/women_readytowear_thumb.jpg"><br>Ready to Wear</p>         <p style=" position:absolute; left:62%; margin-top:10px;"><img src="images/women/women_shoes_thumb.jpg"><br>Shoes</p>           <p style=" position:absolute; left:72%; margin-top:10px;"><img src="images/women/women_bags_thumb.jpg"><br>Bags</p>');
                }
                else
                    if (this.className == 'men') {
                        $('#menBG').stop(true, true).show(5000, 'easeOutExpo');
                        $('#bgIdeas').empty();
                        $('#bgIdeas').append('<p style=" position:absolute; left:20%; margin-top:10px;"><img src="images/men/men_fabrics_thumb.jpg"><br>Fabric</p>          <p style=" position:absolute; left:30%; margin-top:10px;"><img src="images/men/men_readytowear_thumb.jpg"><br>Ready to Wear</p>         <p style=" position:absolute; left:61%; margin-top:10px;"><img src="images/men/men_shoes_thumb.jpg"><br>Shoes</p>           <p style=" position:absolute; left:71%; margin-top:10px;"><img src="images/men/men_accesories_thumb.jpg"><br>Accessories</p>');
                    }
                    else
                        if (this.className == 'kids') {
                            $('#kidsBG').stop(true, true).show(5000, 'easeOutExpo');
                            $('#bgIdeas').empty();
                            $('#bgIdeas').append('<p style=" position:absolute; left:30%; margin-top:10px;"><img src="images/kids/kids_readytowear_thumb.jpg"><br>Ready to Wear</p>         <p style=" position:absolute; left:40%; margin-top:10px;"><img src="images/kids/kids_shoes_thumb.jpg"><br>Shoes</p>         <p style=" position:absolute; left:50%; margin-top:10px;"><img src="images/kids/kids_accessories_thumb.jpg"><br>Accessories</p>');
                        }
                        else
                            if (this.className == 'homes') {
                                $('#homesBG').stop(true, true).show(5000, 'easeOutExpo');
                                $('#bgIdeas').empty();
                                $('#bgIdeas').append('<p style=" position:absolute; left:30%; margin-top:10px;"><img src="images/home/bed_linen_thumb.jpg"><br>Bed Linen</p>            <p style=" position:absolute; left:40%; margin-top:10px;"><img src="images/home/bed_basics_thumb.jpg"><br>Bed Basics</p>            <p style=" position:absolute; left:50%; margin-top:10px;"><img src="images/home/kitchen_textile_thumb.jpg"><br>Kitchen Textile</p>          <p style=" position:absolute; left:60%; margin-top:10px;"><img src="images/home/bath_thumb.jpg"><br>Bath Accessories</p>            <p style=" position:absolute; left:70%; margin-top:10px;"><img src="images/home/home_accessories_thumb.jpg"><br>Home Accessories</p>');
                            }
    }
    },
            function () {
                c = b(this);
                    $('.outerBGs').stop(true, true).hide(5000, 'easeOutExpo');
                $('#backgrounds').stop(true, true).show(1000, 'easeOutExpo');
                $('#bgIdeas').stop(true, true).animate({ bottom: '0px' }, 250, 'easeInCirc');
                c.stop(true, true).animate({ top: '0px' }, 250, 'easeInCirc');
                //            $(document).unbind('mousemove');
                //            $(document).mousemove(function (e) {
                //                var offset = $('#bgIdeas').offset();
                //                result = offset.left <= e.pageX && offset.left + $('#bgIdeas').outerWidth() > e.pageX && offset.top <= e.pageY && offset.top + $('#bgIdeas').outerHeight() > e.pageY;
        //                //To see if mouse coordinates are under the area of div.
        //                //alert(parseInt(parseInt(offset.left) + parseInt($('#bgIdeas').outerWidth())) + '     ' + e.pageX + '         ' + parseInt(parseInt(offset.top) + parseInt($('#bgIdeas').outerHeight())) + '        ' + e.pageY);
        //                                        
        //                if (result == false) {
        //                    clearInterval(myRecFunc);
        //                    $('.bgs').show();
        //                    continueSlideShow();
        ////                    $('#bgIdeas').stop(true, true).animate({bottom: "0px"},500, "easeOutExpo", function () {$(document).unbind('mousemove');});
        ////                    c.stop(true, true).animate({top: "0px"},{ duration: 500, queue: false });

        //                    
        //                }
        //                else {
        //                }
        //            });
    });

上記のコメントされたコードは、実際にはマウスの位置をキャッチし、マウスがDIV上にある場合に関数がコードに入るのを制限することにより、mousemoveイベントによって以前に試した方法ですが、ランダムに不適切な機能につながると思います。イベントのバインドとアンバインドが非常に高速です。これについて助けが必要です。

4

2 に答える 2

0

これは、それぞれが持つ2つのクラスを使用して実行できますdisplay:block

liにこれらのクラスが少なくとも1つある場合は常に、表示されます。したがって、li自体とdivはそれぞれ、上の1つの表示されたクラスmouseoverを削除し、上の独自の(それぞれの)クラスを削除しmouseoutます。

これが例です

于 2012-08-15T06:53:42.173 に答える
0

これは、より良い、まったく異なる答えです

divおよびの最下位の共有親に委任リスナーを配置しliます。例では、これはbody. そのリスナーは、イベントがこれら 2 つの要素のいずれかにあったかどうかを確認し、そうでない場合は に対してアクションを実行しliます。

子要素を含めるように編集されました。

于 2012-08-15T07:48:41.957 に答える