jQuery的.hover（）事件處理程序中的某些代碼未執行

Question

我正在嘗試實現一個簡單的交互：當鼠標指針懸停在特定的<li>元素上時，隱藏的元素將顯示在懸停的元素上方。 隱藏的元素只是出現的一個小按鈕欄，以便用戶可以進一步進行交互。 我有一個<ul>元素和一堆<li>元素，這些元素使用Zurb的Foundation進行了樣式設置，以便項目顯示為塊網格-因此嵌套了<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();
}

Answer 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();
}