我的一个div出现jQuery问题_Jquery_Html

我的一个div出现jQuery问题

jquery html

我的一个div出现jQuery问题,jquery,html,Jquery,Html,编辑：通过在CSS中添加clear:tware，我使我的.panel div无法在整个页面中运行。谢谢你们的帮助和建议请查看我正在进行的练习html/css/js的小项目我对触发页脚动画的鼠标悬停有问题。我只想在将鼠标悬停在#opmetAbout或#面板上时切换页脚。如果您查看HTML，您会在#opmetAbout和#panel周围的div上看到.panel类提供了所需的悬停效果不管出于什么原因，当你将鼠标悬停在中间的填充物上，在右（睡眠时间）和左（唤醒时间）之间时，面板效果会被触发有人

编辑：通过在CSS中添加clear:tware，我使我的.panel div无法在整个页面中运行。谢谢你们的帮助和建议

请查看我正在进行的练习html/css/js的小项目

我对触发页脚动画的鼠标悬停有问题。我只想在将鼠标悬停在#opmetAbout或#面板上时切换页脚。如果您查看HTML，您会在#opmetAbout和#panel周围的div上看到.panel类提供了所需的悬停效果

不管出于什么原因，当你将鼠标悬停在中间的填充物上，在右（睡眠时间）和左（唤醒时间）之间时，面板效果会被触发

有人能解释一下为什么会发生这种情况以及如何解决它吗

谢谢

PS我知道实际的睡眠/唤醒时间计算器还没有功能。对于如何使用js实现这一点，欢迎提出任何建议。

如下更改您的代码：

<body> <!-- this tag was in the wrong place.... fix that! -->
<h1 id="header2"><div>Tempo</div></h1>
<div id="floatholders">  <!-- this tag is new -->
  <div id="left" ><br></br>
     <!-- content goes here -->
  </div>
  <div id="right" >
     <!-- content goes here -->
  <div>
</div>
<!-- this part stays the same... -->
<div id="footerOpmet">opmeT</div>
<div class="panel">
    <div id="footerAbout">About</div>
    <div id="panel"> 
         <!-- content goes here -->
   </div>
</div>
</div> <!-- don't forget to close all the divs -->
</body>

$("#footerAbout").mouseenter(function(){
    $("#panel").slideToggle();
});

$("#footerAbout").mouseleave(function(){
    $("#panel").slideToggle();
});

试一试

当鼠标悬停在

#面板

上时，这可能会导致问题

var panelTimer;
$('#footerAbout').hover(function(){
    $("#panel").slideToggle();
}, function(){
    panelTimer = setTimeout(function(){
        $("#panel").slideToggle();
    }, 50)
})

$("#panel").mouseenter(function(){
    clearTimeout(panelTimer)
})

更新

替换

$(".panel").mouseenter(function(){
    $("#panel").slideToggle();
});

$(".panel").mouseleave(function(){
    $("#panel").slideToggle();
});

与

问题出在我的#footer和#panel环绕的.panel分区上，它贯穿了整个页面。页面上div之间的任何空白都将触发jQuery。为了防止.panel div在页面中运行，我制作了如下CSS。谢谢你的帮助和建议，让我得出这个结论

.panel {
     clear:both;
}

谢谢你的建议，霍根。我最初是这样做的，然后在#footeabout和#footer面板上都加了一个div，这样它们在同一时间的行为方式是相同的。我可以把它改回你上面推荐的状态，但是当面板和左右分别触发切换时，一切都会倒退。关于这方面还有其他建议吗？它的工作方式我想要的，除了它被触发时，你悬停在中心填充。再次感谢@基思，我不知道你说的倒退是什么意思。如果你想让它只在一个div上触发，那么你必须以该div为目标，页面的中心部分是你所目标的div的一部分，这就是为什么它会这样做。我制作了一个CSS类。panel{}来将一个div包装在#aboutomet和#panel上，使它们在同一时间以同样的方式运行。简言之，我只使用div class=“panel”来包装div id=“aboutomet”和div id=“panel”。你知道为什么那个div类会出现在整个页面上吗？也许我应该更改css属性，比如display:？谢谢：）因为你把另外两个div浮动到它的左边和右边。只需在Chrome中运行，右键单击并检查元素，然后您就可以在页面中移动并查看所有元素。嘿，感谢您对使用检查器的建议。我看到我的小组主管浏览了整页。我最终在CSS中添加了clear:tware。不管这是不是修复它的正确方法，它都是有效的。再次感谢你的帮助和建议。嘿，谢谢你的帮助。对我来说，将鼠标悬停在#footer和#面板上效果很好。问题是，当您将鼠标悬停在中间填充（主内容中间向下的垂直直线）上时，也会触发动画。我尝试了你的代码，并试图删除我相应的代码，但无法使其正常工作。不过再次感谢您的帮助，它让我思考和尝试。@Keith它看起来像是

mouseenter

和

mouseleave

事件注册到

$（“.panel”）

将其更改为$（“#footerAbout”）并选中我将其注册到.panel，以便#panel和#footerAbout具有相同的行为。检查编辑我算出了，谢谢你的输入。

$('#footerAbout').hover(function(){
    $("#panel").slideToggle();
})

.panel {
     clear:both;
}