0

编辑：通过将 clear:both 添加到 CSS，我的 .panel div 不会在整个页面中运行。谢谢大家的帮助和建议。

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

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

无论出于何种原因，当您将鼠标悬停在#right（睡眠时间）和#left（唤醒时间）之间的中间填充时，就会触发面板效果。

有人可以解释为什么会发生这种情况以及如何解决吗？

谢谢！

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

4

3 回答 3

1

问题是我包裹在#footer 周围的.panel div，而#panel 贯穿整个页面。页面上 div 之间的任何空白都会触发 jQuery。为了防止 .panel div 通过页面运行，我制作了这样的 CSS。感谢您的所有帮助和建议，使我得出这个结论。

.panel {
     clear:both;
}
于 2013-06-27T01:15:57.997 回答
0

尝试

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

这可能会导致问题，通过隐藏#panel鼠标悬停在它上面的时间

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

和

$('#footerAbout').hover(function(){
    $("#panel").slideToggle();
})
于 2013-06-25T03:36:53.680 回答
0

像这样更改您的代码：

<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：

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

$("#footerAbout").mouseleave(function(){
    $("#panel").slideToggle();
});
于 2013-06-25T03:30:06.067 回答