Мышь над регионом, не покрывающая весь Div

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