我有一个用 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 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;
对我帮助很大。
关于html - visibility : visible and youtube,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12718305/