1

そのため、jqueryでホバーツールチップを配置する際に少し問題があります。親divのcssの「position」属性が「relative」に設定されている場合、ツールチップは画面の左上に飛んでいきます。position属性を削除すると、すべてが正常に機能し、ツールチップが返されます。

私はjQueryやcssのポジショニングルールをあまりよく理解していないので、質問は次のとおりです。

  1. position：relativeがjQueryツールチップの配置を台無しにするのはなぜですか？
  2. position：relativeが必要だった場合（そして必要ない場合）、問題を解決するために何ができますか？

関連するコードは次のとおりです。

$("yay").hover(
 function(){
     // .position() uses position relative to the offset parent,
     var pos = $(this).position();
     // .outerWidth() takes into account border and padding.
     var width = $(this).outerWidth();

     var messageToLoad = dumpArray[$(this).attr('class')];
     $(messageToLoad).css({
         left: (pos.left + width) + "px",
         top: pos.top + "px",
         position: "absolute",
         "visibility":"visible",
         "display":"inline"
     });
 },

そして、（問題のある）cssは次のとおりです。

.content {
    margin: 0 0 0 35px;
    position:relative;
}

htmlは次のとおりです。

...
<tr class="PostOdd">
    <td>
    <div class="contents">
        <div class="content">
            <p> Brand new post goes here</p>
            <p class="postDate">June 15, 2012, 4:02 a.m.</p>
            <p class="options">
                <a href="/comments/1/1">
                    <img class="yay" src="/static_files/chat-icon.png">
                </a>
            </p>
        </div>
    </div>
...

アップデート：

a。私はjqueryのみを使用しており、他のJavaプラグインはまったく使用していません

b。cssファイルの親に起因する「位置」属性を削除すると、すべてが正常に機能します。実は削除したので、好奇心ほど問題にはなりません。私は別のセクションに取り組んでいます-そのセクションを終えるまでに答えが得られない場合は、jfiddleデモを作成します

4

2 に答える 2

1

DIV「.content」が最初に配置された要素であるため、これが発生していると思います。たとえば、次の構造を参照してください。

<div class="great-grandfather">

    <div class="grandfather">

        <div class="father">

            <div class="son">

                <img class="yay" src="/static_files/chat-icon.png">

            <div>

        </div>

    </div>

</div>

で設定されているように、クラス「yay」の画像の上にマウスを置くと、位置の参照は、相対または絶対位置プロパティposition: absoluteを持つ最初の親要素になります。

DIV「.son」の位置が相対的または絶対的である場合、「。yay」画像は「.son」に従って位置を調整します。「.father」が持っている場合は、「。fahter」などに応じて。

すべての親が位置プロパティを持っている場合、相対的または絶対的である可能性があり、最初の親要素、この場合は「.son」と見なされます。

私がこの説明を手伝ってくれることを願っています。疑問がある場合は、コメントを残してください。回答を編集します。

于 2012-06-16T23:32:26.420 に答える
0

次のように、コンテンツクラスにz-indexを追加する必要がある場合があります。

.content {
    margin: 0 0 0 35px;
    position: relative;
    z-index: 1;
}
于 2012-12-11T17:28:08.093 に答える