可见性：可见和 youtube答案

【问题标题】：visibility: visible and youtube可见性：可见和 youtube
【发布时间】：2012-09-24 23:02:43
【问题描述】：

我有一个使用ul/li 列表创建的菜单。

为了创建一个漂亮的效果，我有以下 css：

#menu ul { 

    /* ... */

    visibility:hidden; 

    /* ... */

} 

#menu li:hover > ul {
    /* ... */ 

    visibility: visible;

    /* ... */
}

您可以在此处查看完整代码：http://www.red-team-design.com/css3-animated-dropdown-menu。

除非我嵌入了 Youtube 视频（例如随机视频 - <iframe src="http://www.youtube.com/embed/e80qhyovOnA?rel=0" frameborder="0" width="420" height="315"></iframe>），否则菜单可以正常工作，没有任何问题。

我已经解决了可见性 css 属性和使用 Chrome 时的问题。

有没有办法可以更改 CSS 以保持弹跳效果？

用display:none 替换它可以工作，但它会失去弹跳效果。似乎与 Youtube 的代码有冲突。理想情况下，我不会触及 iframe 中的任何内容，除非它是自动化的，因为视频是通过 WYSIWYG 嵌入的。

谢谢。

【问题讨论】：

“除非我嵌入了 Youtube 视频，否则菜单可以正常工作，没有任何问题”——那么当您嵌入 YouTube 视频时会发生什么？你有点忽略了解释。或者提供一个我们可以观察问题的样本。
嵌入 youtube 视频时，下拉菜单（通过鼠标悬停激活）不起作用。我无法显示示例，但可以通过在 Chrome 中访问此页面 red-team-design.com/wp-content/uploads/2011/11/… 然后单击“关于”或“取消”轻松复制它（它必须是没有要复制的子菜单的选项），按 F12，编辑 html代码并将任何 youtube iframe 放在
标记之后。然后将鼠标悬停在“工作”或“类别”菜单上，您将根本看不到子菜单。可见性标签似乎与 youtube 冲突。

标签： html css google-chrome youtube

【解决方案1】：

Youtube CSS 在过渡方面出了点问题，所以，只需改变

-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;

到

-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;

这对我帮助很大。

【讨论】：

标记之后。然后将鼠标悬停在“工作”或“类别”菜单上，您将根本看不到子菜单。可见性标签似乎与 youtube 冲突。