On my website, there is an arrow located on the middle right side that, when hovered over with the mouse, reveals a sidebar. Clicking on each icon in the sidebar further extends it to reveal more content. However, the issue I am facing is that the sidebar collapses even when the mouse is still over it. To see this problem in action, visit here, hover over the arrow on the right, click on one of the icons, and then move your mouse out of the sidebar.
It seems like the area that triggers the "mouse over" event is different from the actual displayed region of the sidebar.
Below is the code snippet I am referring to:
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> </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");
});