1

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

悬停处理程序似乎工作得很好，因为无论我移动光标多快或它落在哪里，调试日志都完美地写入控制台。但是，.show() 和 .hide() 的切换从来都不是一致的。在某些情况下，当光标进入有<li>问题的项目时，按钮栏会出现，而在其他情况下，则不会。有时当光标退出<li>元素时，按钮栏永远不会隐藏。最令人费解的是，调试日志按预期调用，但处理程序中的其他代码行却没有。有人知道解决方法吗？我试过hoverIntent，但结果仍然存在。我认为这可能是因为<li>'s 是水平排列的，这可能会导致这个问题，但我不确定。如何确保 .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 回答