我有一个带有纯 CSS 动画过渡的简单语言选择页面。我在这里做了一个 jsFiddle 。
它应该如何表现如下:
- 用户将鼠标悬停在两个(或更多)语言选择器之一上。
- 该语言选择器向上过渡并完全不透明。相关的语言文本(例如,英语、西班牙语)也会出现。
- 用户要么单击链接,要么将鼠标移出,在这种情况下,转换反转。
在 Chrome 中,它的行为符合预期。
在 Firefox 中,当我将鼠标悬停在一张图像上时,两者都会向上移动。
在 Opera 中,它的行为基本符合预期,但文本在向上移动后又跳回。
我试图了解为什么会在这些浏览器中发生这种情况,以及如果可能的话,我该如何解决它。
在jsFiddle宕机的情况下,相关代码为:
HTML
<div id="container"><div id="cell">
<div class="langcell"><a href="en/index.html">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/200px-Flag_of_the_United_States.svg.png" /><br/><p>English</p></a>
</div>
<div class="langcell"><a href="es/index.html">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9a/Flag_of_Spain.svg/200px-Flag_of_Spain.svg.png" /><br/><p>Español</p></a>
</div>
</div></div>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
display: table;
}
#cell {
display: table-cell; vertical-align: middle; text-align: center;
}
.langcell {
display: inline-block;
margin: auto 1em;
}
a {
position: relative;
top: 0;
-webkit-transition: top 0.25s;
-moz-transition: top 0.25s;
-o-transition: top 0.25s;
transition: top 0.25s;
color: black;
text-decoration: none;
}
a:hover {
top: -16pt;
}
a p {
font-size: 14pt;
font-weight: bold;
text-transform: uppercase;
font-family: Verdana, Geneva, sans-serif;
letter-spacing: 0.05em;
opacity: 0;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
a:hover p {
opacity: 1;
}
a img {
opacity: 0.65;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
a:hover img {
opacity: 1;
}