0

ウィンドウの下部にあるサイトのナビゲーションのプロトタイプを作成しています。リンクにカーソルを合わせると、ナビゲーションの上にサブリンクとともに div が表示されますが、ナビゲーションのホバーされたリンクの中央に位置しません。css を使用して左に -50% 配置しようとしましたが、多くの効果がありました [親のサイズの左に 50% しか移動していないように見えます]。jQuery を使用してどうすればよいですか?

注: hoverIntent も使用しています。

4

1 に答える 1

0

代わりに 1 ピクセル幅のコンテナー div を配置 (固定) し、内側の要素 (実際のアイテム) をその絶対幅の半分だけオフセットします。このトリックはうまくいきました。

HTML:

  <style type="text/css">
    #testnav-container {
      position:fixed;
      bottom:0;
      left:50%;
      width:1px;
      border:1px solid red;
      text-align:center;
    }
    #testnav {
      height:20px;
      width:100px;
      background:blue;
      margin-left:-50px;
    }
  </style>
  <div id="testnav-container">
    <div id="testnav">test navigation bar</div>
  </div>

コンテナ div の 1px 境界線は、どこにあるかを示すためのものです。それを試してみて、それがどうなるか教えてください。

コンソールで実行するスニペット jQuery の例:

var foo = $('<div style="position:fixed;bottom:0;left:50%;width:1px;border:1px solid red;text-align:center;"><div style="height:20px;width:100px;background:blue;margin-left:-50px">test navigation bar</div></div>').appendTo('body');
于 2010-12-21T16:36:17.927 に答える