jQuery'；s.hover（）不'；不执行

我试图实现一个简单的交互：当鼠标光标悬停在一个特定的

元素上时，一个隐藏的元素显示在悬停的元素的顶部。隐藏元素只是一个小按钮栏，它的出现可以让用户进一步交互。我有一个 UL> < /Case>元素，有一组

元素，这些元素是使用Zurb的基础设计的，以便这些项出现为块网格——因此嵌套的<代码> UL> < /代码>。 悬停处理程序似乎工作得很好，因为调试日志被完美地写入控制台，无论我移动光标的速度有多快，或者光标落在哪里。但是，.show（）和.hide（）的切换从来都不一致。在某些情况下，当光标进入有问题的

项时，按钮栏会显示，而在其他情况下则不会显示。有时，当光标退出

元素时，按钮栏从不隐藏。最令人费解的是调试日志是按预期调用的，而处理程序中的其他代码行则不是。有人知道解决办法吗？我已经试过了，但效果一直很好。我想可能是因为

是水平排列的，这可能会导致这个问题，但我不确定。如何确保.hover（）方法的行为一致

以下是问题的一个方面：

我从一些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>

以下是驱动悬停事件的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();
}

---

不要使用

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

---

不要使用

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

---

这是复制粘贴错误还是打字错误<代码>函数exitCatItem{对不起，输入错误。没有抛出错误。它应该是：函数exitCatItem（e）{我看不到任何会导致您所经历的情况的东西。您能设置一个JSFIDLE吗？JSFIDLE:将光标快速地在这三个项目上滑动几次，您会看到图像上显示的按钮栏不一致。但是，如果您缓慢地滑动，您将能够使按钮栏切换。这是您正在查看的吗对于？这是复制粘贴错误还是键入错误？

函数exitCatItem{

对不起，键入错误。不会引发错误。它应该是：函数exitCatItem（e）{我看不到任何会导致您所经历的情况的东西。您能设置一个JSFIDLE吗？JSFIDLE:将光标快速地在这三个项目上滑动几次，您会看到图像上显示的按钮栏不一致。但是，如果您缓慢地滑动，您将能够使按钮栏切换。这是您正在查看的吗因为？谢谢你。我很感激！谢谢你。我很感激！