3

前文：これはやや「学術的な」質問です。私は、実用的な解決策ではなく、説明とインテリジェントな推測を探しています（「解決」するための実際の問題はありません）。

そのため、:hoverセレクターにそのdisplayプロパティをnoneに設定させた場合、Chrome（v23）では認識できる効果がないことに気付きました。実際、セレクターの他のプロパティは適用されません。セレクター全体が無視されているようです。

例えば

<div class="myElement">Hover over this. Nothing happens!</div>

..。

.myElement:hover {
  display:none;
  color:red;
}

（これのjsFiddleをチェックしてください）

明らかに、display:noneの要素はホバーできないため、要素はセレクターによって即座に選択されなくなり、プロパティ:hoverが失われdisplay:noneます（そして再び選択できるようになります）。

このルールの逆説的な性質からdisplay、他のブラウザ（つまり、Firefox）のように、プロパティが（たとえば、フレームごと、またはマウスの移動ごとに）急速に切り替わらないのはなぜか疑問に思います。Chromeの実装が好きだと思いますが、なぜ他のプロパティ（例color:red）が適用されないのでしょうか。

質問：Chromeがこのばかげたセレクターを救済することを選択する公式の文書化された理由はありますか、それともこれはある種のバグですか？

4

2 に答える 2

4

質問: Chrome がこのばかげたセレクターを利用することを選択した理由は公式に文書化されているのでしょうか、それとも何らかのバグなのでしょうか?

リンクにカーソルを合わせたときに発生するレンダリング イベントを見ると、Chrome は実際にこの変更を表示にレンダリングしているように見えます (当初、Chrome はパフォーマンス上の理由からそれを無視していると思っていました)。1.65 秒では、この表示の変更により、スタイルとレイアウトを再計算する 11360 のイベントがキャプチャされました。

ちらつきが見られないのはなぜですか？Chrome は非常に速い速度で変更を表示しているため、変更が表示されません (またはブラウザーが表示しないだけです)。Visibility: hidden に切り替えると、flickr が表示されます。これは、アイテムがまだ Render Tree にあり、非表示になっているためです (さらに、処理が遅くなり、Render イベントの発生が大幅に少なくなります)。

他のプロパティ (例: color:red) が適用されないのはなぜでしょうか。

カスケードなので、表示: なしが適用され、次に赤色が適用されます。ホバー状態が表示されないのと同じ理由が、色の変化が表示されないのと同じ理由です。

それが役立つことを願っています!

于 2012-12-18T04:35:00.220 に答える
0

同時に、ブラウザに混乱を引き起こしているとdisplay:none思います。hoverでも動作しvisibility:hiddenます。

display:block;
visibility:hidden;
color:red;

ここで確認できます：http://jsfiddle.net/MnZyx/2/

于 2012-12-18T04:18:47.650 に答える