Question

我正在努力转换onmouse悬停div。效果应该是从div的顶部到中间合并的文本，而div从正方形变为圆形。问题是，如果在FireFox中，方形到圆形效果有效，但文本从顶部下拉，则此效果仅适用于Chrome和IE。有没有人遇到这个，有人能告诉我为什么会这样吗？我的按钮代码如下：

#navigation{
font-size:14px;
float:left;
left:0;
height:100%;
position:static;
width:65px;
margin-top:6.5%;
margin-left:10%;
}


#tab1{
float:left;
width:65px;
height:65px;
left:0;
transition:all 1s, all 1.1s;
-webkit-transition:all 1s, all 1.1s;
-moz-transition:all 1s, all 1.1s;
margin-top:40px;
box-shadow: 1px 1px 2px #000;
}

.tab1h{
width:65px;
height:65px;
visibility:none;
position: absolute;
opacity: 0;
vertical-align: middle;
text-align:center;
transition:all 1s, all 1.1s;
-webkit-transition:all 1s, all 1.1s;
-moz-transition:all 1s, all 1.1s;
}


#tab1:hover {
border-radius:50%;
overflow:hidden;
visibility:none;
}


#tab1:hover > .tab1h {
visibility:visible;
float:left;
opacity:1;
padding-top:20px;
}
    <div id="navigationi">
            <a href="index.html" >
                <div id="tab1" style="background-color:#f5f4f0; font-size:14px;">
                    <div class="tab1h">
                    Home
                    </div>
                </div>
            </a>
</div>

所以这是我的html和css，这里还有一个JSFiddle http://jsfiddle.net/MFcS5/。

谢谢，维克多

Answer 1

从overflow:hidden删除#tab1:hover可解决问题。 Here's a fiddle显示它在Firefox（以及Chrome和IE）中按预期工作。

可能是由this bug引起的：“由于祖先或自我的帧重建，CSS转换不会启动......”;更改overflow会导致#tab1在转换应该开始的同时重绘，因此其子.tab1h无法转换。

CSS Transition不适用于Firefox

1 个答案: