1

この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;
}
4

2 に答える 2

3

ホバーイベントが失われているため、ちらつきはそれほどありません。border-radiusFirefox は、ホバーとしての空白部分でマウスを検出しません。マウスが黒い部分にとどまるように移動すると、スムーズに遷移します。

これが Firefox や他のブラウザーのバグなのか、それとも仕様で定義されていないのかはわかりません。border-radius私が CSS3 仕様で読んだことから、ボックス モデルにどのように影響するかについての議論はありません。おそらくその省略により、ボックスモデルに影響を与えるべきではなく、これは 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があります。

于 2013-01-21T20:39:56.053 に答える
1

円を中央に配置し、すべての側面に均等に広げます。ちらつき効果は発生しません。

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/

これがあなたに当てはまるかどうかはわかりません。

于 2013-01-21T20:40:05.643 に答える