1

単純なインタラクションを実装しようとしています。マウスカーソルを特定の<li>要素に合わせると、ホバーされた要素の上に非表示の要素が表示されます。非表示の要素は、ユーザーがさらに操作できるように表示される小さなボタンバーです。アイテムがブロックグリッドとして表示されるように、Zurb's Foundationを使用してスタイル設定された要素<ul>の束を持つ要素があります。したがって、ネストされた要素があります。 <li><ul>

ホバーハンドラーは、カーソルの移動速度やカーソルの位置に関係なく、デバッグログがコンソールに完全に書き込まれるため、正常に機能しているように見えます。ただし、.show（）と.hide（）の切り替えに一貫性はありません。カーソル<li>が問題のアイテムに入るとボタンバーが表示される場合と表示されない場合があります。カーソルが要素を出るときに<li>、ボタンバーが非表示にならない場合があります。最も不可解なのは、デバッグログが期待どおりに呼び出されることですが、ハンドラーの他のコード行は呼び出されません。誰かが回避策を知っていますか？hoverIntentを試しましたが、結果が持続します。<li>横に並べているせいか、問題が発生するのではないかと思いましたが、よくわかりません。.hover（）メソッドで一貫した動作を保証するにはどうすればよいですか？

これが問題のjsfiddleです：http： //jsfiddle.net/DdWrD/6/

いくつかのPHPからマークアップを作成します。

<div id="grids" class="twelve columns">

<!-- begin "all templates" category tab -->
<li class="active" id="allTab">
    <ul class="block-grid three-up">
        <?php

        foreach ($templates as $t) {

            echo '<li class="catItem" id="'.$t['title'].'">';
            echo '  <ul class="button-group radius"><li><a class="button small" href="#">Preview</a><li><a class="button small" href="#">Personalize</a></li></ul>';
            echo '  <img src="../images/posters/hires/'.$t['poster'].'">';
            echo '  <h6>'.$t['section'].' &nbsp;>&nbsp; '.$t['category'].'</h6>';
            echo '  <h5>'.$t['title'].'</h5>';
            echo '</li>';

            }

        ?>
    </ul>
</li>
<!-- end "all templates" tab -->

</div>

ホバーに表示したいボタンバーのSCSSスタイル

#grids{
>li{
    >ul{
        >li{
            >ul{
                padding-bottom: 0px;
                margin-bottom: 0px;
                width: 150px;
                position: absolute;
                display: none;
                >li{
                    padding: 0px;
                    width: 50%;
                    border-right: 0px none;
                }
            }
            border-top: 1px dotted $light-dotted-border;
            border-left: none;
            border-right: 1px dotted $light-dotted-border;
            border-bottom: none;
            padding: 10px;
            cursor: pointer;
         }
      }
   }
}

ホバーイベントを駆動しているJavascriptは次のとおりです。

function initCatalog()
{
$('.catItem').hover(hoverCatItem, exitCatItem);
}

function hoverCatItem(e)
{
    debug.log("[CATALOG]    :   Hovering over catalog item.");
    $(e.target).children('ul').show();
}

function exitCatItem(e)
{
    debug.log("[CATALOG]    :   Exit catalog item.");
    $(e.target).children('ul').hide();
}
4

1 に答える 1

1

e.targetを使用する代わりに、this

function hoverCatItem(e)
{

    var bar = $(this).children('.button-group');
    bar.stop(true, true).show();
}


function exitCatItem(e)
{

    var bar = $(this).children('.button-group');
    bar.stop(true, true).hide();
}
于 2012-08-22T14:22:20.773 に答える