8

リンクと画像を含むサムネイルのリストがあるので、ユーザーがli要素にカーソルを合わせると、高さが100％になりますが、Chromeでは奇妙な理由で問題が発生します。liChromeでホバーされた幅が「新しい」サイズに調整されない理由がわかりません。

（注：これは私の問題の簡略版です）

また、この問題はでのみ発生し:hoverます。しかし、そうではありません:nth-child

遊び場リンク

クロームvsFF

更新：問題は続く...

答えで私の解決策を見てください、しかし問題は続きます..私はマウスでズームインしました、そしてあなたはそれが起こっているのを見るでしょう..画像の数が膨大になる可能性があることに注意してください。

アップデート2：

mousehweelイベントが発生するたびに強制的に再描画します... thumbs.hide().show(0);

4

3 に答える 3

1

私の解決策：解決策の遊び場

アイデアは、状態でほぼ同じ新しい高さを画像に与えることによって、Chromeをだまして幅を再計算させることですli:hover。しかし、これはChromeには十分ではありません。トランジションもに適用する必要がありますimg。これはすべてブードゥーコーディングですが、これは私が思いつくことができる最も醜い解決策です：

ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%; }
  li{ display:inline-block; vertical-align:middle; height:60%; -webkit-transition:.2s; transition:.2s; }
  li:hover{ height:100%; }
    li a{ height:100%; padding:0 2px; display:block; }
    li a img{ height:96%; -webkit-transition:.2s; transition:.2s; }
    li:hover a img{ min-height:96%; }
于 2013-02-06T15:49:27.280 に答える
0

私はここで新しいです、そしてこれが良い習慣であるかどうかはわかりませんが、私は私の観察を投稿します、そして正確な解決策ではありません：

  1. 同じ問題がOperaでも発生します。

  2. これは私には奇妙に思えました-li:hover a img{ border:1px solid black; }現在の状況に変更を加えることを想定していない同様のcssコードが追加されると、すべてが非常に奇妙に動作し始めます。例-http://jsbin.com/operib/43/edit

そして、これは私がエレガントだとは思わない解決策であり、簡単な修正です：http: //jsbin.com/operib/39/edit

編集：@Carol McKayの結果をテストした後、私は移行が全体を混乱させていることに気づきました。次のリンク（ノード58）は、上記でリンクされたノード43（基本的にノード1は、ホバー時に画像に境界線を追加しただけです）で、トランジションが削除されており、正常に機能します http://jsbin.com/operib/58/edit。

<img/>ディメンションが再計算されるように、ホバー時にcssルールを追加する必要があるようです。

于 2013-02-05T23:56:04.753 に答える
0

代わりに、画像にトランジションを適用してください。

css

ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%; 
}
li{ display:inline-block; vertical-align:middle; height:60%; }
li a{ height:100%; padding:0 2px; display:block; }
li a img{ display:inline-block; vertical-align:middle; height:96%; transition:0.15s; -   webkit-transition:0.15s; }

li:hover{ height:100%; }
li:hover a img{ height:100%; opacity:1; }

http://jsbin.com/operib/83/edit

于 2013-02-05T23:57:55.833 に答える