所以我尝试使用 CSS 创建一个带有简单翻转的菜单:
img.fade {
opacity: 1;
-webkit-transition: opacity .08s linear;
}
img.fade:hover {
opacity: 0;
}
HTML:
<a href="#" class="main_menu_option"><span style="position: relative;"><img src="img/home_btn_hover.png" alt="#" class="fade" ><img style="position: absolute; left: 0px;" src="img/home_btn.png" class="fade" /></span></a>
<a href="#" class="main_menu_option"><span style="position: relative;"><img src="img/explore_btn_hover.png" alt="#" class="fade" ><img style="position: absolute; left: 0px;" src="img/explore_btn.png" class="fade" /></span></a>
<a href="#" class="main_menu_option"><span style="position: relative;"><img src="img/dives_btn_hover.png" alt="#" class="fade" ><img style="position: absolute; left: 0px;" src="img/dives_btn.png" class="fade" /></span></a>
在 safari/chrome 中工作正常,但 Firefox 有一些我似乎无法修复的对齐问题。有什么想法吗?
Check out the issue here (make sure to view with firefox)
最佳答案
您的转换具有 -webkit-
供应商扩展:
-webkit-transition: opacity .08s linear;
所以 Firefox 不会识别它,因为 Firefox 运行在 Gecko 上,而不是 WebKit。尝试添加 -moz-transition
看看会发生什么(我自己还没有玩过 CSS 过渡)。
关于html - Firefox 中的 CSS3 翻转问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4745852/