下拉框保持闪烁 – JQuery和CSS
我对某些非常基本的东西感到困难。 我正在尝试使用JQuery和CSS实现一个下拉框。 当我将鼠标hover在“产品”链接上时，我无法弄清楚为什么我的下拉框会一直闪烁。
这是我正在做的工作的演示。 http://174.132.101.73/~ree/header/
我将不胜感激任何帮助。
编辑
那么通过查看我给出的链接的源代码可以找到代码。 您可能需要显示/隐藏下拉框的主要部分是CSS和CSS：
$(document).ready(function(){ $('li.headlink').hover( function() { $('ul', this).css('display', 'block'); }, function() { $('ul', this).css('display', 'none'); }); }); #header_wrapper宽度固定为950px， #logo和#nav在其中浮动。 由于#logo是250px，因此在#nav （其元素也是浮动的）中留下700px。
在“产品”子菜单变得可见之前，一切都很合适。 然后它的.headlink变得更宽，由于额外的内容，它将#nav的整体大小推到了强制下降到#logo下面的下一个“行”的#logo 。 这是浮动元素的工作方式; 它们水平填满空间，直到某个块太大而被推到第一个块下面。
闪烁的原因是:hover不再处于活动状态，子菜单被隐藏。 然后一切都回到原来的样子。 除了鼠标指针仍在那里，现在:hover再次处于活动状态。 重复。
我不确定我是如何解决它的，但在我看来这是错的。 也许你可以改变你的元素嵌套的方式，或者不要浮动导航部分。 要快速修复，您可以将#header_wrapper宽度更改为更大的值，例如1450px，只是为了查看“产品”子菜单的行为方式，并解决其问题。
好吧，我在过去的15分钟里一直在解决这个问题，最后找到了ACTUAL解决方案。
我已经编写了过去的下拉列表，很好，并且想知道为什么我现在得到这个闪烁的问题，因为我使用的是固定代码和超时。
好吧，我发现我使用了错误的Jquery事件。 不要使用jquery HOVER事件，而是使用jquery mouseover事件和mouseout事件。 这将解决HOVER相关问题。
接下来设置隐藏超时，并在显示时清除超时，并在隐藏之前清除超时。 无论多长时间设置此选项，您都希望在向外滚动时使用菜单。
如果您在hover时使用超时但仍然会出现闪烁，请务必使用mouseover事件。
$(".btn").mouseover(function() { clearTimeout(this.timeout); $(this).addClass("hover"); /* can add class, or manually set menu visible, i prefer using CSS class */ }).mouseout(function() { clearTimeout(this.timeout); /* clear timeout in case 2 mouseout events fire at same time */ this.timeout = setTimeout($.proxy(function() { $(this).removeClass("hover"); }, 300)); });
此代码应该可以重复使用页面中的所有下拉菜单。