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>

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

其他任何内容都没有更改 - 我只删除img和#banner-2-img中的2 #banner-3-img个元素。

这怎么可能？

Answer 1

我不知道为什么它不能从单独的.js文件中工作（脚本的链接位于html页面的底部，代码在$(document).ready()块中），但是当我＆＃ 39;将hover-check代码放在html页面的底部，一切正常。

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

.hover（）方法奇怪的行为

1 个答案: