Question

我正在尝试实现一个简单的交互：当鼠标光标悬停特定的<li>元素时，隐藏元素会显示在悬停元素的顶部。隐藏元素只是一个小按钮栏，因此用户可以进一步交互。我有一个<ul>元素和一堆<li>元素，这些元素使用Zurb的Foundation进行样式设置，以便项目显示为块网格 - 因此嵌套<ul>。

悬停处理程序似乎运行得很好，因为无论我移动光标的速度有多快，或者它落在哪里，调试日志都会完美地写入控制台。但是，.show（）和.hide（）的切换永远不会一致。在某些情况下，当光标进入有问题的<li>项时，按钮栏会显示，而在其他情况下则不会。有时当光标退出<li>元素时，按钮栏永远不会隐藏。最令人费解的是调试日志按预期调用，但处理程序中的其他代码行不是。有人知道解决方法吗？我试过hoverIntent，但结果仍然存在。我想也许是因为<li>水平排列，这可能会导致这个问题，但我不确定。如何使用.hover（）方法确保一致的行为？

这是问题的一个方面： 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();
}

jQuery的.hover（）事件处理程序中的一些代码不会执行

1 个答案: