.hover() 方法奇怪的行为

Question

我正在尝试为站点构建一个主菜单，因此当我将鼠标悬停在菜单的 li 上时，将显示一个 div，其中包含子菜单，其中可能包含 1到 3 个横幅。

这是我在 li 上悬停时用来显示子菜单的代码（此代码仅测试是否捕获了悬停事件）：

$('#navigation-menu>li').on('mouseenter', function (event) {
    console.log("HOVERED!");
}).on('mouseleave', function(){
    console.log("MOUSELEAVE!");
});

我还确定 div 中将显示的横幅数量（在我的脚本文件中，这段代码在悬停检查之前。如果重要的话，我也使用 Bootstrap。）：

if(!$.trim($("#banner-3-img").html()).length) {
    if(!$.trim($("#banner-2-img").html()).length) {
        $("#banner-1").addClass("col-sm-12");
        $("#banner-2").css("display","none");
        $("#banner-3").css("display","none");
        console.log("1 BANNER");
        return;
    }
    console.log("2 BANNERS");
    $('#banner-1').addClass("col-sm-6");
    $('#banner-2').addClass("col-sm-6");
    $("#banner-3").css("display","none");

}else{
    console.log("3 BANNERS");
    $("#banner-1").addClass("col-sm-4");
    $("#banner-2").addClass("col-sm-4");
    $("#banner-3").addClass("col-sm-4");
}

这是带有这些横幅标记的 html 部分：

<div class="row-fluid">

    <div id="banner-1">
        <a href="#">
            <div id="banner-1-img">
                <img  src="img/mega-menu/banner-1.png" alt=""/>
            </div>
        </a>
    </div>

    <div id="banner-2">
        <a href="#">
            <div id="banner-2-img">
                <img  src="img/mega-menu/banner-3-2.png" alt=""/>
            </div>
        </a>
    </div>

    <div id="banner-3">
        <a href="#">
            <div id="banner-3-img">
                <img  src="img/mega-menu/banner-3-3.png" alt=""/>
            </div>
        </a>
    </div>

</div>

奇怪的是，当我从 #banner-2-img 和 #banner-3-img 中删除 img 元素时，脚本发现我只有 1 个横幅（并设置了所需的 class)，但悬停检查代码不起作用 - 当悬停在 li 上时，我没有在控制台中看到 "HOVERED!"。当我显示 2 或 3 个横幅时，我会收到 "HOVERED!" 消息。

没有其他改变 - 我只删除了 #banner-2-img 和 #banner-3-img 中的 2 个 img 元素。

这怎么可能？

Answer 1

我不知道为什么它在单独的 .js 文件中不起作用（脚本的 link 位于 html 页面的底部，代码在 $(document).ready() 块中)，但是当我将悬停检查代码放在 html 页面底部时，一切正常。

<script>
(function(){
    $('#navigation-menu>li').on('mouseenter', function () {
        console.log("HOVERED!");
    }).on('mouseleave', function(){
        console.log("MOUSELEAVE!");
    });
})();
</script>

.hover() 方法奇怪的行为

.hover() method strange behaviour

jquery

hover