1

所以我在一个列表中有几个东西，当我将鼠标悬停在它们上时，我有一组应该显示的按钮，当我将鼠标悬停在它上面时会再次隐藏。到目前为止，我为此编写的 jQuery 看起来像这样：

    $('li.mine > div').hover(function () {
        $(this).children('span.button-pane').stop().show('clip', 200);
    }, function () {
        $(this).children('span.button-pane').stop().hide('clip', 200);
    });

如果用户将鼠标悬停，然后完全移出，这将非常有用。但是，如果用户将鼠标直接移动到 li.mine 的另一个 div 子项，它会显示新按钮并且不会隐藏旧按钮。我怎样才能得到它，以便在显示新按钮窗格之前隐藏上一个按钮窗格？

编辑：这是一些 HTML

<li id="list_g236c167c6515484db1a424867cdcb2cb" class="group mine ">
    <div>
        <span class="itemText" data-bind="textToTextbox: Description">Random Group A</span>
        <span class="button-pane align-right" style="float: right; display: block; ">
        <img onclick="JOURNAL.functions.deleteItem(this)" class="float-right hand-cursor delete-button" src="/Content/images/deletered.png" height="18" width="18">    
            <img data-bind="reminderModal: Reminder" class="float-right hand-cursor reminder-button" src="/Content/images/reminder.png">
        </span>
    </div>
    <ol>
        <li id="list_oc647c84fba4c4f5d91f8fdeccb538811" class="no-nest mine ">
            <div>
                <span class="itemText" data-bind="textToTextbox: Description">Random Objective 1</span>
                    <span class="button-pane align-right" style="float: right; ">
                    <img onclick="JOURNAL.functions.deleteItem(this)" class="float-right hand-cursor delete-button" src="/Content/images/deletered.png" height="18" width="18">    
                </span>
                <input type="text" style="display:none" class="itemTextBox">
            </div>
       </li>

       <li id="list_o42c8f0ab4839468b86996f3a3fcff4fa" class="no-nest mine ">
            <div>
                <span class="itemText" data-bind="textToTextbox: Description">Random Objective 2</span>
                <span class="button-pane align-right" style="float: right; display: block; ">
                <img onclick="JOURNAL.functions.deleteItem(this)" class="float-right hand-cursor delete-button" src="/Content/images/deletered.png" height="18" width="18">    
                </span>
                <input type="text" style="display:none" class="itemTextBox">
            </div>
       </li>

    </ol>
</li>
4

1 回答 1

0

问题是因为跨度仍在动画中。jQuery 在动画时使用 ui-effects-wrapper 类将 pan 粘贴到另一个 span 中。所以，如果它仍然是动画，我们需要捕捉到这个事实，并将其隐藏在 ui-effects-wrapper 下，如下所示：

$('li.mine > div').hover(function () {
        if ($(this).children('.ui-effects-wrapper').length > 0) { // we're still animating!
            $(this).children('.ui-effects-wrapper').children('span.button-pane').show('clip', 200);
        }
        $(this).children('span.button-pane').stop().show('clip', 200);
    }, function () {
        if ($(this).children('.ui-effects-wrapper').length > 0) { // we're still animating!
            $(this).children('.ui-effects-wrapper').children('span.button-pane').hide('clip', 200);
        }
        $(this).children('span.button-pane').stop().hide('clip', 200);
    });
于 2012-06-14T16:32:38.450 回答