Question

我的右侧中间有一个箭头，当鼠标悬停时，会显示一个侧边栏，当点击该侧边栏的每个图标时，侧边栏会显示内容。一旦用户将鼠标移出侧边栏，侧边栏内容就会折叠。我的网站是here（将鼠标悬停在右侧的箭头上，然后点击其中一个图标，然后鼠标移开以查看我的问题）。问题是，当鼠标仍在侧边栏上时，侧边栏会折叠。

好像侧边栏的区域被认为是＆＃34; moused over＆＃34;与所示侧边栏的区域不同。

我所指的代码位于

之下

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

鼠标覆盖区域未覆盖整个Div

1 个答案: