没有覆盖整个分区的鼠标覆盖区域

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"); 
});