0

テキストを含むページコンテンツがあります。コンテンツの下にナビゲーター バーがあり、ナビゲーターの要素の 1 つをホバーすると、ホバーした要素のすぐ上に div が開き、いくつかのコンテンツが表示されます。

ページ上のすべてのオブジェクトのように、ポップアップする DIV がページ上のオブジェクトをプッシュしたくありません。

some code since I have to insert code tags if I want to post fiddle

ここに示すフィドルがあります：

フィドルについてはこちら

フィドルでは、最初にホバーするたびに、最初のフィードバックが彼のすぐ上に表示されるようにします。

これはほとんど私のコードです。jQueryを使用して目的の幅を計算しましたが、divを上にあるはずのdivの上に置くことができません。ウェブサイトはかなり動的であるため、目で計算してピクセル数を言うことはできません。そのため、毎回それを計算する式が必要です。

フィードバック div の再配置など、コードに関する提案がある場合は、気軽にフィドルを編集してください。

前もって感謝します！

4

1 に答える 1

0

更新:わかりました、私はあなたが指定した方法でそれを行いました: http://jsfiddle.net/2U7jB/3/。他の方法があります - それはあなたの HTML に依存します。

元の応答:これはあなたが望むものに近いです: http://jsfiddle.net/2U7jB/2/

.popup {
    display: none;
    height: 35px;
    width: 100%;
    background-color: blue;
}

<div id="first">
    <div class="popup"></div>
</div>
<div id="second">
    <div class="popup"></div>
</div>
<div id="third">
    <div class="popup"></div>
</div>

$('#first, #second, #third').on('mouseover', function() {
    $(this).children('.popup').show();
});
$('#first, #second, #third').on('mouseleave', function() {
    $(this).children('.popup').hide();
});

必要なものを取得するには、#first、#second、および #third 内に 2 つの div を作成するだけです。最初の div は非表示 (ポップアップ) コンテンツ用で、2 番目の div はナビゲーション メニュー/背景色用です。

于 2013-03-10T23:26:49.747 に答える