javascript - 鼠标悬停在不覆盖整个 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");
});