jquery - YouTube Embed 似乎干扰了 CSS 下拉菜单的悬停

Question

由于过去几个月没有更改代码，下拉菜单在 http://weldtite.co.uk/ 上开始表现异常

悬停时链接背景应该变成红色，如果有下拉菜单应该出现。应用了在悬停时添加类的 jQuery(为了 IE6 用户的利益)。所以 CSS 看起来像这样:

.primary-item:hover a,
.active a,
.primary-item:hover span,
.active span {
    background-color: #ed1b2d;
    color: #FFF;
}

.primary-item:hover .secondary-nav,
.active .secondary-nav {
    opacity: 1;
    visibility: visible;
}

这适用于所有内页。

但主页中嵌入了 YouTube 视频。如果我删除 YouTube 视频，菜单悬停状态有效。如果我将它们放回去，菜单悬停状态将再次失败。

这似乎只是 Google Chrome (21.0.1180.82) 中的一个问题，而且只是偶尔发生。

我尝试过的事情:

• 在 iframe 上放置较低的 z-index。
• 将 iframe 包装在一个 div 中并向该 div 添加较低的 z-index。
• 将 ?wmode=transparent 和 opaque 添加到视频 URl。

有什么想法吗？

Answer 1

出于某些奇怪的原因，让 CSS3 “过渡:所有 .2s 缓入缓出；”在主要元素上，二级导航下拉菜单破坏了它(但仅在带有 YouTube 视频的主页上。我已将它们更改为“过渡:不透明度 .2s 缓入缓出；/过渡:背景颜色 .2s 缓和- in-out；”然后世界又恢复正常了。

奇怪。