.hover（）方法奇怪的行爲

我試圖爲一個網站建立一個主菜單，所以當我將鼠標懸停在菜單的li上時，會顯示一個div，其中包含子菜單，它可能包含1到3個橫幅。.hover（）方法奇怪的行爲

這是我用來顯示子菜單懸停在li時（如果懸停事件被抓住了這個代碼只是測試）的代碼：

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

我也決定在div條幅的數量，這將是顯示（在我的腳本文件這一代碼進入懸停檢查之前，我還使用引導程序，如果它的問題。）：

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-imgimg元素，腳本發現我只有1個旗幟（並設置所需的類），但徘徊校驗碼不工作 - 我在懸停在li上時，請勿在控制檯中獲取"HOVERED!"。當我顯示2或3個橫幅時，我確實收到了"HOVERED!"消息。

沒有其他變化 - 我只刪除#banner-2-img和#banner-3-img中的2 img元素。

這怎麼可能？

來源

2016-02-28 keshet

不清楚第二個代碼塊與第一個代碼塊的關係如何。創建一個能夠重現問題的演示。 – charlietfl

發佈菜單的html - 或者創建一個小提琴/ codepen – Jbird

爲什麼你有一個'return'語句，如果有一個橫幅？ – Jbird

-1

我不知道爲什麼它沒有從單獨的.js文件（到腳本的鏈接位於HTML頁面的底部，該代碼是$(document).ready()塊）工作，但是當我把懸停檢查代碼放在html頁面的底部，一切正常。

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

來源

2016-02-28 16:29:23 keshet

.hover（）方法奇怪的行爲

回答

相關問題