Question

我试图找出为什么我的悬停功能表现得很奇怪。当您将鼠标悬停在div上时，另一个div变为可见。但是，当我将光标向下移动到可见的div时，它会淡出并再次淡入。这不应该发生，应该保持可见，直到我的光标离开主容器。

这是我的代码。

HTML

<div id="searchWrapper" class="fleft">
    <div class="box">Hover here!</div>
    <div class="searchLinks" style="display: none;">
        <form id="search_mini_form" action="" method="get">
            <div class="form-search">
                <label for="search">Search:</label>
                <input id="search" type="text" name="q" value="" class="input-text" maxlength="128" autocomplete="off">
                <button type="submit" title="Search" class="button"><span><span>Search</span></span></button>
                <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
                <script type="text/javascript">
                    //<![CDATA[
                    var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
                    searchForm.initAutocomplete('http://removed.com/index.php/catalogsearch/ajax/suggest/', 'search_autocomplete');
                    //]]>
                </script>
            </div>
        </form>
    </div>
</div>

的jQuery

<script type="text/javascript">
    jQuery(function($) {

        $("#searchWrapper").hover(
            function () {
                $(".searchLinks").fadeIn( 500 );
            },
            function () {
                $(".searchLinks").fadeOut( 500 );
            }
        );

    });
</script>

CSS

#searchWrapper {
    position:relative;
}

#searchWrapper .searchLinks {
    position: absolute;
    z-index: 99999;
    top: 50px;
    background: #e7e7e7;
    right: -145px;
    display:none;
    padding:10px;
}

#searchWrapper .box {
    border:solid 1px #555;
    padding: 20px 0px;
    text-align:center;
}

你可以在这里看到它如何淡入，然后一旦你将鼠标悬停在它上面就会淡出并重新出现。

http://jsfiddle.net/421g2cdh/7/

Answer 1

您必须使用stop()功能。

jQuery(function($) {

    $("#searchWrapper").hover(
        function () {
            $(".searchLinks").stop(true,true).fadeIn( 500 );
        },
        function () {
            $(".searchLinks").stop(true,true).fadeOut( 500 );
        }
    );

});

此外，如果你不希望在鼠标位于它和它的父节点之间时看到fadeOut，请减少.searchLinks的边距。（填充顶部而不是顶部）

（见http://jsfiddle.net/421g2cdh/11/）

Answer 2

每次悬停元素时，必须停止匹配元素上当前运行的动画。

使用stop()

尝试：

 jQuery(function($) {

        $("#searchWrapper").hover(
            function () {
                $(".searchLinks").stop().fadeIn( 500 );
            },
            function () {
                $(".searchLinks").stop().fadeOut( 500 );
            }
        );

    });

DEMO

Answer 3

使用stop()，您可以使用输入/输出悬停方法处理程序：

jQuery(function ($) {
    $("#searchWrapper").hover(
    function () {
        $(".searchLinks").stop().fadeToggle(500);
    });
});

jsFiddle

fadeToggle()

Answer 4

以上都没有为我工作，但我找到了一个只使用.unbind()启动一次的解决方案：

$("#sidebar").unbind().on('mouseenter', function() {
    console.log('mouse entered sidebar');
});

悬停动画上的jQuery多次触发

4 个答案: