我在处理一些非常基本的事情时遇到了困难。我正在尝试使用 JQuery 和 CSS 实现下拉框。我不明白为什么当我将鼠标悬停在“产品”链接上时,我的下拉框一直在闪烁。
这是我正在处理的演示。 http://174.132.101.73/~ree/header/
我将不胜感激。
编辑
那么代码可以通过查看我提供的链接的源代码找到。您可能需要显示/隐藏下拉框的主要部分是这个,以及 CSS:
$(document).ready(function(){
$('li.headlink').hover(
function() { $('ul', this).css('display', 'block'); },
function() { $('ul', this).css('display', 'none'); });
});
最佳答案
#header_wrapper
的宽度固定为 950px,#logo
和 #nav
在其中 float 。由于 #logo
是 250px,因此 #nav
中的内容还剩下 700px(其元素也是 float 的)。
在“产品”子菜单可见之前,一切都很好。然后它的 .headlink
变得更宽,由于额外的内容,这将 #nav
的整体大小推到它被迫向下到下一个“行”的地方,下面#标志
。这就是 float 元素的工作方式;它们水平地填充空间,直到某个 block 太大并被推到第一个 block 下方。
闪烁是因为 :hover
不再处于事件状态并且子菜单被隐藏。然后一切又回到原来的样子。除了鼠标指针还在那里,所以现在 :hover
再次激活。重复。
我不确定如何修复它,但在我看来这就是问题所在。也许您可以改变元素的嵌套方式,或者不要 float 导航部分。为了快速修复,您可以将 #header_wrapper
宽度更改为更大的宽度,例如 1450 像素,只是为了查看“产品”子菜单的行为方式,并解决它的问题。
关于jquery - 下拉框不断闪烁 - JQuery 和 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1430183/