懸停火狐

Question

如何停止這個div的閃爍，當它盤旋着，它只是有在Firefox問題閃爍格，鉻是好的

http://jsfiddle.net/GpuUb/

jQuery的解決方案都很好

CSS

div { 
    height: 30px; 
    width: 30px; 
    background-color: #000; 
    margin: 50px; 
    border-radius: 15px; 
    transition: all 1s; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
} 

div:hover { 
    height: 300px; 
    width: 300px; 
    background-color: #000; 
    margin: 50px; 
    border-radius: 150px; 
} 

Answer 1

它沒有太多的閃爍，因爲它失去了懸停事件。 Firefox不會將border-radius的空白部分中的鼠標檢測爲懸停。如果移動鼠標使其停留在黑色部分，則平滑過渡。

我不確定這是Firefox中的錯誤還是其他瀏覽器或規格未定義的錯誤。從我在CSS3規範中讀到的內容來看，沒有關於border-radius如何影響盒子模型的討論。也許由於這種遺漏，它不應該影響盒子模型，然後這將成爲Firefox的一個缺陷。

你可以用一個包裝的容器div來修復它，但這不是非常優雅。這是你的包裝div的修改版本。

HTML

<div id="container"><div id="circle"></div></div> 

CSS

div#container { 
    display: inline-block; 
    background-color: green; 
    margin: 50px; 
} 
div#circle { 
    height: 30px; 
    width: 30px; 
    background-color: #000; 
    border-radius: 15px; 
    transition: all 1s; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
} 

div#container:hover div { 
    width: 300px; 
    height: 300px; 
    background-color: #000; 
    border-radius: 150px; 
} 

這裏的jsFiddle一起玩。

Answer 2

我將圓定位在中間，並同樣向各個方向展開。那麼閃爍效應不會發生：

CSS：

div { 
    height: 30px; 
    width: 30px; 
    background-color: #000; 
    margin: 75px; 
    border-radius: 15px; 
    transition: all 1s; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
} 

div:hover { 
    height: 300px; 
    width: 300px; 
    background-color: #000; 
    margin: 00px; 
    border-radius: 150px; 
} 

HTML：

<div></div> 

提琴手：http://jsfiddle.net/eNabK/

我不知道這applicatiable是給你的。