首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >我的一个div出现了jQuery问题

我的一个div出现了jQuery问题
EN

Stack Overflow用户
提问于 2013-06-25 10:31:31
回答 3查看 66关注 0票数 0

编辑:我把clear:both添加到.panel中,这样我的CSS div就不会遍历整个页面。感谢大家的帮助和建议。

请查看我正在进行的小项目,以便在http://opmet.net上练习我的html/css/js

我有一个鼠标悬停触发页脚动画的问题。我只想在#opmetAbout或#panel内/外悬停时切换页脚。如果你看一下超文本标记语言,你会看到#opmetAbout和#面板周围的div上的.panel类给出了想要的悬停效果。

无论出于什么原因,当你将鼠标悬停在#right (睡眠时间)和#left (唤醒时间)之间的中间填充上时,面板效果就会触发。

谁能解释一下为什么会发生这种情况,以及如何修复它?

谢谢!

另外,我知道实际的睡眠/醒来时间计算器还没有功能。任何关于如何使用js做到这一点的建议也是受欢迎的。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-06-27 09:15:58

问题是我用#页脚和#面板包装的.panel div在整个页面上运行。页面上div之间的任何空格都会触发jQuery。为了防止CSS div遍及整个页面,我制作了如下.panel。感谢您的所有帮助和建议,让我得出了这个结论。

代码语言:javascript
复制
.panel {
     clear:both;
}
票数 1
EN

Stack Overflow用户

发布于 2013-06-25 11:30:06

像这样修改你的代码:

代码语言:javascript
复制
<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>

或者像这样修改你的javascript:

代码语言:javascript
复制
$("#footerAbout").mouseenter(function(){
    $("#panel").slideToggle();
});

$("#footerAbout").mouseleave(function(){
    $("#panel").slideToggle();
});
票数 0
EN

Stack Overflow用户

发布于 2013-06-25 11:36:54

试一试

代码语言:javascript
复制
$('#footerAbout').hover(function(){
    $("#panel").slideToggle();
})

这可能会导致问题,因为当鼠标悬停在#panel上时将其隐藏

代码语言:javascript
复制
var panelTimer;
$('#footerAbout').hover(function(){
    $("#panel").slideToggle();
}, function(){
    panelTimer = setTimeout(function(){
        $("#panel").slideToggle();
    }, 50)
})

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

更新

替换

代码语言:javascript
复制
$(".panel").mouseenter(function(){
    $("#panel").slideToggle();
});

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

使用

代码语言:javascript
复制
$('#footerAbout').hover(function(){
    $("#panel").slideToggle();
})
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17288210

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档