0

ニュースのスクロールアップまたはブラインド効果のあるウェブサイトを開発しています。シナリオは、ユーザーがニュースアイテムにマウスを合わせると、ポップボックスが開きます。

私が書いたコードですべてがうまくいっています：

    if(options.mousePause)
    {
        obj.bind("mouseenter",function(){
            options.isPaused = true;
            $Box.css('width',200);
            obj.children('ul').children('li').css('background','#f0f0f0');
            obj.children('ul').children('li').children('a').css('color','#000');
            var offset = obj.children('ul').children('li').offset();
            $Box.css('left', offset.left);
            $Box.css('top', offset.top+25);
            $Box.css('display','block');
        }).bind("mouseleave",function(){

            $Box.hover(function(){
                options.isPaused = true;
            },function() { 
                options.isPaused = false;
                $Box.css('display','none');
                obj.children('ul').children('li').css('background','transparent');
                obj.children('ul').children('li').children('a').css('color','#ffe300');
            });

            options.isPaused = false;
            $Box.css('display','none');
            obj.children('ul').children('li').css('background','transparent');
            obj.children('ul').children('li').children('a').css('color','#ffe300');
        }); // mouseleave function end

すべて問題ありませんが、ニュースアイテムボックスにカーソルを合わせると表示されますが、ボックスにカーソルを合わせることができません。マウスポインターがニュースストリップを離れると、vticker.js関数mouseleaveが呼び出され、ボックスが再び消えます。

このページをライブhttp://tagbees.designforce.us/で確認し、この問題を解決するためのアドバイスをください。

前もって感謝します。よろしく

4

3 に答える 3

0

2つのオプションがあります。

オプション1

.Scrollerand.tickPop要素を別の要素でラップし、ラッパーでmouseoverandmouseleaveイベントをバインドします。mouseoverあなたがチェックする：

  • イベントターゲットが.Scrollerアイテム（li）の場合は、を開くか更新します.tickPop
  • イベントターゲットが.tickPop、の場合、何もしません
  • それ以外の場合は、を閉じます。マウスがコンテナ全体を離れたことがわかっているので、を閉じ.tickPop ます。mouseleave.tickBox

オプション2

onsetTimeoutの終了に少し追加し、マウスが入った場合、またはアイテムが入った場合に呼び出します。.tickPopmouseleaveclearTimeout.tickBox.Scroller

于 2012-01-29T23:02:59.310 に答える
0

グローバルブール変数「DisplayPopup」を宣言します。デフォルト値falseニュースストリップのマウスホバーとマウス入力でのみ、ニュースストリップのすべての子アイテムは「DisplayPopup」= trueに設定されます。また、「DisplayPopup」が「true」に設定されている場合は、その値を変更しないでください。ニュースストリップとニュースストリップのすべての子アイテムのマウスホバー、マウスエンター、マウスリーブで、「DisplayPopup」=trueの場合にポップアップが表示されるように設定されていることを確認します。

ポップアップを閉じるには、2つのオプションがあります

  1. ボタンを閉じます。この閉じるボタンの後ろに「DisplayPopup」=falseを設定します
  2. ポップアップセット「DisplayPopup」=falseをマウスで離して、ポップアップを閉じます。

また、ポップアップがニュースストリップの子アイテムではないことを確認してください。そのすぐ下に表示されます。

于 2012-01-30T18:05:11.367 に答える
0

心配してくれて助けてくれたOriとSyedSalmanAkbarに感謝します。Oriの両方の方法とSyedSalmanakbarの1つのロジックを試しましたが、無駄でした。私は他の多くのオプションも試しましたが、ついにそれを手に入れました。

問題は、正常に機能していたストリップLIの「マウスリーブ」機能にはありませんでした。マウスを離れると、li関数は$ Box.css（'display'、'none'）;を設定して、LIの色と背景を再描画/復元します。

コードに次の変更を加えました。

  1. 私の質問では、ポップアップボックスのホバー関数コードがLIの「mouseleave」関数にネストされていました。$Box.hover関数をLIの「mouseleave」関数から外しました。

  2. 「mouseenter」関数と「mouseleave」関数は、ストリップとは別のオブジェクトであるため、$Boxにバインドされています。

  3. $ Boxの「mouseenter」関数は、ストリップLIを再描画するコードを追加して、LIがまだホバリングしているように感じさせ、$Boxの「mouseleave」関数でLIを復元/再描画します。

新しいコードを見てください：

    if(options.mousePause)
    {
        obj.bind("mouseenter",function(){
            options.isPaused = true;
            $Box.css('width',200);
            obj.children('ul').children('li').css('background','#f0f0f0');
            obj.children('ul').children('li').children('a').css('color','#000');
            var offset = obj.children('ul').children('li').offset();
            $Box.css('left', offset.left);
            $Box.css('top', offset.top+25);
            $Box.css('display','block');
        }).bind("mouseleave",function(){
            options.isPaused = false;
            $Box.css('display','none');
            obj.children('ul').children('li').css('background','transparent');
            obj.children('ul').children('li').children('a').css('color','#ffe300');
        }); // mouseleave function end
    } // if end
    $Box.bind("mouseenter",function(){
        options.isPaused = true;
        isBoxHover = true;
            $Box.css('width',200);
            obj.children('ul').children('li').css('background','#f0f0f0');
            obj.children('ul').children('li').children('a').css('color','#000');
            var offset = obj.children('ul').children('li').offset();
            $Box.css('left', offset.left);
            $Box.css('top', offset.top+25);
            $Box.css('display','block');

    }).bind("mouseleave",function() { 
        options.isPaused = false;
        isBoxHover = false;
        $Box.css('display','none');
        obj.children('ul').children('li').css('background','transparent');
        obj.children('ul').children('li').children('a').css('color','#ffe300');
    });

そして今、それは私にとってうまく機能しています。次のページにアクセスすると、結果を確認できます： http: //tagbees.designforce.us/

于 2012-01-30T19:09:22.473 に答える