2

ここで検索して何時間もグーグルで検索しましたが、この問題の解決策をまだ見つけていません...基本的に、各リストアイテムをホバーするとアイコンの巨大なリストがあり、アイテムのテキスト名が表示されます. ただし、幅をアニメーション化すると、ドキュメント全体が強制的にリフローされます。

これを回避する方法はありますか？jQuery と css の考えられるすべての組み合わせを試してみましたが、役に立ちませんでした。jQuery position() に基づいて位置をホバリングすると、(親 UL に対して) 絶対位置を追加しようとしましたが、期待どおりに機能しません。

各アイコンをホバーして、テキストを表示するために展開できるようにしたいのですが、残りのコンテンツをリフローするのではなく、単に固定位置にあるかのように動作し、残りの部分と対話しないようにしますコンテンツのレイアウト。

アニメーションのビットは次のとおりです。

  $('.service-generator li').hover(function() {
    var labelWidth = $(this).children('label').width() + 41;
    $(this).animate({width: labelWidth + 'px'}, 180);
  },
  function() {
    $(this).animate({width: '35px'}, 180);
  });

また、実際のマークアップのビューも参考になると思います。

<ul class="service-generator">
  <li id="[service-name]" class="full-service-wrapper photo">
    <label class="icon-name" for="[service-name]-checkbox">[service-name]</label>
    <div class="icon-wrapper">
      <input type="checkbox" checked="checked" name="[service-name]" id="[service-name]-checkbox"><img alt="[service-name]" title="[service-name]" src="[service-name].ico">
    </div>
  </li>
</ul>

そして、結果を表示する画像は次のとおりです。 ここに画像の説明を入力

4

1 に答える 1

2

これを行う方法は、灰色の丸みを帯びた境界線の div コンテナーを、相対位置で li タグ内に絶対配置することです。次に、ホバリング時に絶対位置の灰色の境界線 div の幅を調整します。また、オーバーラップを制御するために、マウスオーバー/マウスアウトでも z-index を調整する必要がある場合があります。

于 2012-05-27T22:23:34.403 に答える