沒有覆蓋整個分區的鼠標覆蓋區域

Question

我的側面右側有一個箭頭，當鼠標懸停在上面時，顯示一個側欄，當側欄的每個圖標被點擊時，側欄會擴展顯示的內容。一旦用戶將鼠標移出邊欄，邊欄內容就會倒塌。我的網站是here（將鼠標移到右側的箭頭上，然後單擊其中一個圖標，然後將鼠標移出以查看我的問題）。問題是，當鼠標仍然在側欄上時，側欄會崩潰。

就好像側邊欄的區域被認爲是「被淹沒」不同於所示側欄的區域。

我所指的代碼如下

HTML

<div id="sidebar"> 
<div id="newsbar" class="icon"><img src="images/icons/whatsnew.png" width="70" height="70" alt="Ninja Warrior News"></div> 
<div class="sidebarinfocontent" id="newscontent"><h1>Latest</h1> 
       <p>The past few months, I have been working on a brand new website design and am delighted to finally be able to present it to you. This new design features a brand new comprehensive sidebar which greatly enhances both the look and the breakdown of content on the website. In addition, there is a slightly modified navigation bar with new red and blue colored buttons. You will also find that the background of the site has changed from a red and brown gradient to a solid black which does not clash nearly as much with the banner and with content. Let us know what you think in the feedback section.</p> 
       <p>&nbsp;</p> 
       <h2 align="center" style="padding-bottom:5px;">How Many Pageviews?</h2> 
       <iframe src="http://www.seethestats.com/stats/11594/Pageviews_9ec4cf0b2_ifr.html" style="width:270px;height:142px;border:none;" scrolling="no" frameborder="0"></iframe></div> 

JQuery的

//sidebar appearance 
$("#sidebar").mouseout(function(e) { 
    $("#sidebar").css("right","-120px"); 
    $("#arrow").fadeIn(1200); 
}); 

$("#arrow").mouseover(function(e) { 
    $("#sidebar").css("right","0px"); 
    $("#arrow").fadeOut(400); 
}); 

$("#sidebar").mouseover(function(e) { 
    $("#sidebar").css("right","0px"); 
    $("#arrow").fadeOut(400); 
}); 

$(".icon").click(function(e) { 
    $(".sidebarinfo").css("right","0px"); 
    $("#sidebar").css("right","-120px"); 
}); 

$(".sidebarinfo").mouseout(function(e) { 
    $(".sidebarinfo").css("right","-290px"); 
    $(".sidebarinfocontent").css("display","none"); 
}); 



//Sidebar individual icon clicks 
$("#newsbar").click(function(e) { 
    $("#newscontent").css("display","block"); 
}); 

Answer 1

後閱讀所有的評論，我已經在測試你的網站我本地和我已經解決了這個問題。在這裏解釋一切真的很困難。這只是關於邏輯思維。所以我要給出確切的答案。

您需要使用以下腳本更新main.js文件。只有一個部分你在你的問題中給出。但是在這裏，我將分兩部分。您需要更新代碼中的這一部分。

// Sidebar appearance 
$("#sidebar").mouseout(function(e) { 
    $("#sidebar").css("right","-120px"); 
    $("#arrow").fadeIn(1200); 
}); 

$("#arrow").mouseover(function(e) { 
    $("#sidebar").css("right","0px"); 
    $("#arrow").fadeOut(400); 
}); 

$("#sidebar").mouseover(function(e) { 
    $("#sidebar").css("right","0px"); 
}); 

$(".icon").click(function(e) { 
    $(".sidebarinfo").css("right","0px"); 
    $("#sidebar").css("right","-120px"); 
}); 

$(".sidebarinfo").mouseout(function(e) { 
    $(".sidebarinfo").css("right","-290px"); 
    $("#sidebar").css("right","-120px"); 
}); 
$(".sidebarinfocontent").mouseover(function(){ 
    $('.sidebarinfo').css("display","block"); 
    $(".sidebarinfo").css("right","0px"); 
}); 


//Sidebar individual icon clicks 
$("#newsbar").click(function(e) { 
    $(".sidebarinfocontent").css("display","none"); 
    $("#newscontent").css("display","block"); 
}); 

$("#obstaclesbar").click(function(e) { 
    $(".sidebarinfocontent").css("display","none"); 
    $("#getobstaclescontent").css("display","block"); 
}); 

$("#aboutmebar").click(function(e) { 
    $(".sidebarinfocontent").css("display","none"); 
    $("#aboutmecontent").css("display","block"); 
}); 

$("#searchbar").click(function(e) { 
    $(".sidebarinfocontent").css("display","none"); 
    $("#searchcontent").css("display","block"); 
}); 

$("#quizbar").click(function(e) { 
    $(".sidebarinfocontent").css("display","none"); 
    $("#quizcontent").css("display","block"); 
}); 

$("#contactbar").click(function(e) { 
    $(".sidebarinfocontent").css("display","none"); 
    $("#contactcontent").css("display","block"); 
});